Cara Membuat Pop up Widget E-mail Subscribe Box di Blogger

Cara Membuat Pop up Widget E-mail Subscribe Box di Blogger

Cara membuat pop up widget e-mail subscribe box di blogger, merupakan hal yang akan kita bahas hari ini.

Penjelasan Singkat tentang Widget E-mail Subscribe

Widget e-mail subscribe box merupakan widget yang tak kalah penting selain widget postingan populer, widget recent post, dll. Widget ini, berfungsi sebagai media untuk pengunjung yang ingin mengikuti blog kita. Dengan cara, si pengunjung mengisikan e-mail mereka pada widget ini dan memencet tombol subscribe.

Kenapa pengunjung tersebut mengikuti blog kita ?

Biasanya, mereka senang dengan blog kalian. Seperti artikelnya yang mudah dibaca dan dipahami, isi artikel itu dapat memecahkan masalah si pengunjung, dll.

Oleh karena itu, kali ini Saya akan membuat widget e-mail subscribe tersebut dalam tampilan pop up.

Baca juga:
Membuat widget e-mail subscribe sederhana di blogger
- Membuat widget e-mail subscribe dilengkapi tombol follow media sosial di blogger

Cara Cepat Membuat Pop up Widget E-mail Subscribe Box di Blogger

  • Pertama, login dahulu ke akun blogger kalian.
  • Kedua, buka opsi Tema => Edit HTML => pastekan kode dibawah ini sebelum kode ]]></b:skin> atau </b:skin> dan simpan perubahan.
#sub-box {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}
#boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#boxview {background:#fff;border:5px solid #fff;position:absolute;top:33%;left:28%;}
#closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;}
#closebox:before {content:&quot;Close&quot;padding:5px 8px;background:#fff;color:#48cb7a;font-weight:normal;font-size:12px;font-family:Open sans;}
#boxlink,#boxlink a.visited,#boxlink a,#boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
#subscribe-box {width:600px;height:250px;background-color:#02BA74;}
#subscribe-box p {font-family:&#39;Open Sans&#39;;font-size:18px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;font-family:&#39;Open Sans&#39;;width:100%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:normal;font-size: 16px;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;} 
  • Ketiga, kalian pergi ke opsi Tata Letak => Tambahkan Gadget => pilih HTML/Javascript => pastekan kode berikut ini dibagian konten.
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan cookie
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// cookie
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#sub-box').delay(3000).fadeIn('fast');
$('#closebox, #boxclose').click(function(){
$('#sub-box').stop().fadeOut('fast');
});
}

});
</script>
<div id='sub-box'>
<div id='boxclose'>
</div>
<div id='boxview'>
<div id='closebox'>
</div>
<div id='subscribe-box'>
                 <center><p>Subscribe for Latest Update</p></center>
             <div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}' onfocus='if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}' value='Your Name'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Subscribe Now!'/>

              </form>
             </div></div> 
</div>
</div>
Konfigurasi:
Ganti kata YOUR-USER-NAME dengan username/ID feedburner blog kalian.
Cara Mengetahui ID Feedburner Blog Sendiri
  • Terakhir, simpan dan kalian cek hasilnya.

Akhir Kata

Semoga kalian suka dengan tampilan pop up untuk widget e-mail subscribenya. Oh ya, jika kalian mengalami kendala saat mencoba tutorial diatas, tuliskan kendala tersebut di kolom komentar. Siapa tahu Saya dapat mengatasinya.

Sekian artikel tentang cara membuat pop up widget e-mail subscribe box di blogger. Terimakasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel