cara menciptakan popup email subscribe atau berlangganan blogger ringan

ADSENSE Link Ads 200 x 90

ADSENSE 336 x 280

cara menciptakan popup email subscribe atau berlangganan blogger ringan

Hai teman 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 menciptakan popup email subscribe blogger yang ringan karena emang tidak memakai javascript melainkan hanya memakai css saja, Bagi teman yang sedang mencari cara untuk menciptakan 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 sajian tema / Theme atau template.
#3. Lalu taruh arahan css dibawah ini di template blogger teman masing masing.

#popup-wrap .popup-button { background: #A1362A url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL6oJcDlCPXLsr-9J8jn2x4wj4vkkVG4wMd5_DeZp5KKUUsc-TiTFIMpWI-I-uV5fNWS7rPFtnVhKNanS3uUYe5lCMtk2rdKYAF23hffCv56o3l-OqXuJ9COsgf40Ay_s6oSit5TccjtGe/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 arahan HTML dibawah ini sempurna diatas arahan </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 teman masing masing.

#5. Save / Simpan template teman 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 berkhasiat bagi nusa dan bangsa ^_^
Sumber https://perampokgoogle.blogspot.com

ADSENSE 336 x 280 dan ADSENSE Link Ads 200 x 90

Tweet