cara membuat popup email subscribe atau berlangganan blogger ringan

cara membuat popup email subscribe atau berlangganan blogger ringan

Hai sahabat perampokgoogle selamat siang jumpa lagi ne sama ane admin blog sederhana yang membahas tutorial mengenai blogger dan optimasinya, Siang ini aku mau membuatkan sedikit tutorial mengenai bagaimana cara membuat popup email subscribe blogger yang ringan karena emang tidak menggunakan javascript melainkan hanya menggunakan css saja, Bagi sahabat yang sedang mencari cara untuk membuat popup ini silahkan ikutin terus postingan ini ya !

Kalau kau pengen punya pelanggan / pembaca yang berlangganan artikel blog kau melalui email nggak ada salahnya deh kau pasang widget ini diblog, Caranya mudahkok.

Langkah pemasangan widget popup email subscribe blogger :

#1. Silahkan login ke dashboard blogger https:www.blogger.com
#2. Setelah masuk silahkan klik menu tema / Theme atau template.
#3. Lalu taruh isyarat css dibawah ini di template blogger sahabat masing masing.

#popup-wrap .popup-button { background: #A1362A url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9G0G2tVd9jEyZXjuiGJa8uK31-kgh1AryJUVfIEy4WzO_KYr5iklvgRx_0YHaq7Xch33IoACOFmBIz4bkjrvbkSwM0iydJi_hGhJkVYnnvEFVF4jVZGK_8F4l1PCA8sg8xnOfUtyMi5wK/s1600/envelop.png") no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height: 80px; left: 25px; position: fixed; width: 80px; z-index: 99999; } #popup-wrap .popup-button:hover { background-color: #70261D; }  #popup-wrap .popup-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, .8); transition: opacity .25s ease; z-index: 999999; } #popup-wrap .popup-bg-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; } #popup-wrap .popup-trigger { display: none; } #popup-wrap .popup-trigger:checked + .popup-bg { opacity: 1; visibility: visible; } #popup-wrap .popup-trigger:checked + .popup-bg .popup-form { top: 0; }  #popup-wrap .popup-form { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; max-width: 400px; margin: auto; overflow: auto; padding: 2.5em; max-height: 280px; background: #cc6055; text-align: center; } #popup-wrap .popup-inner { color: #fff; font-size: 15px; font-family: "Century Gothic", sans-serif; font-weight: bold; line-height: normal; } #popup-wrap .popup-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 20px; } #popup-wrap .popup-content { font-size: 16px; line-height: 26px; } #popup-wrap .popup-footer { font-size: 75%; font-style: italic; } #popup-wrap #mailbox,  #popup-wrap #subbutton { background: #A1362A; border: none; border-radius: 3px; box-sizing: border-box; color: #fff; font-family: "Century Gothic",sans-serif; font-size: 12px; font-weight: bold; line-height: 30px; padding: 10px 20px; width: 100%; } #popup-wrap #mailbox { margin: 0 0 10px; text-transform: lowercase; } #popup-wrap #subbutton { cursor: pointer; margin: 0; text-transform: uppercase; } #popup-wrap #subbutton:hover { background: #70261D; }  #popup-wrap .popup-form-close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; } #popup-wrap .popup-form-close:after, #popup-wrap .popup-form-close:before { content: ''; position: absolute; width: 5px; height: 1.5em; background: #A1362A; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; } #popup-wrap .popup-form-close:hover:after, #popup-wrap .popup-form-close:hover:before { background: #70261D; } #popup-wrap .popup-form-close:before { transform: rotate(-45deg); }

#4. Setelah itu letakan isyarat HTML dibawah ini sempurna diatas isyarat </body>

 <div id="popup-wrap">   <!-- Subscribe Trigger -->        <label class='popup-button' for='popup-trigger'></label>    <!-- Subscribe Content -->   <input class='popup-trigger' id='popup-trigger' type='checkbox'/>   <div class='popup-bg'>             <label class='popup-bg-close' for='popup-trigger' id='popup-close'></label>             <div class='popup-form'>                 <label class='popup-form-close' for='popup-trigger' id='popup-close'></label>                 <div class='popup-inner'>                     <!-- Opt-In Subscribe -->                     <span class="popup-title">Subscribe Via Email</span>                     <span class="popup-content">Subscribe to our newsletter to get the latest updates to your inbox. ;-)</span>                     <br/><br/>                     <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR_SUBSCRIBE_ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>                         <input name='uri' type='hidden' value='YOUR_SUBSCRIBE_ID'/>                         <input name='loc' type='hidden' value='en_US'/>                         <input id='mailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' required='' type='text' value='Enter your email...'/>                         <input id='subbutton' title='' type='submit' value='Sign up'/>                     </form>                     <br />                     <span class="popup-footer">Your email address is safe with us!</span>                 </div>             </div><!-- .popup-form -->   </div><!-- .popup-bg -->     </div><!-- #popup-wrap -->

Silakan ganti goresan pena YOUR_SUBSCRIBE_ID dengan user id feedburner sahabat masing masing.

#5. Save / Simpan template sahabat dan cek deh.

Oke sekian dulu artikel terbaru wacana blogger , Jika kau ingin berlangganan artikel blog ini dan dikirim secara otomatis ke email kau silahkan berlangganan ya !

biar memiliki kegunaan bagi nusa dan bangsa ^_^

Tweet