Cara Membuat Kotak Email Berlangganan Pada Blogger

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Pada artikel edisi kali ini saya akan membagikan tutorial "Cara Membuat Kotak Email Berlangganan Pada Blogger". Widget ini adalah penunjang popularitas bagi para Blogger dengan mendapatkan banyak pelanggan karena kualitas artikel yang diposting pada blog mereka, perlu anda ketahui bahwa sebagai seorang Blogger anda akan mendapatkan pelanggan jika artikel anda berkualitas. Kualitas itu antara lain adalah anda memposting artikel yang dibutuhkan oleh pengunjung dan pengunjung kagum pada artikel anda atau blog anda secara menyeluruh, itu akan nampak apabila artikel anda mudah dipahami maksudnya dan tampilannya juga menghibur terutama tampilan menyeluruh pada tubuh blog anda. Kualitas tersebut akan meningkatkan minat pembaca blog anda.
Widget email berlangganan ini didesain dalam banyak gaya, ada yang sederhana sampai yang keren seperti yang saya bagikan dalam artikel kali ini. bentuknya yang responsive dan keren sehingga tampak modern dan mampu membuat blog anda tampil indah dan modern.
Berikut adalah fitur yang dimiliki oleh widget email berlangganan yang saya bagikan dalam artikel edisi kali ini:
1. Tampilan lengkap yang berkesan mengingatkan para pengunjung untuk berlangganan.
2. Ringan, karena dibangkitkan dengan CSS dan JavaScript yang sangat ringan sehingga tidak memberatkan blog anda. Aktivitas dan loading blog anda tidak terganggu.
3. Dilengkapi dengan tombol "Close" supaya tidak mengganggu pengunjung yang ingin membaca artikel blog anda.
4. Responsive pada tampilan perangkat Desktop, Tablet dan Mobile.

Saya sangat merekomendasikan widget ini untuk anda, sebelum ke tutorialnya alangkah baiknya jika anda melihat dulu hasilnya⇩

Result

Jika anda berminat, mari ke tutorialnya⇨

1. Login ke Blogger➤Template➤Edit HTML, terus letakkan CSS berikut diatas / sebelum tag ]]></b:skin>⇩

/*****************************************************
Email Subscription Box By www.BloggerAutodidact.com
******************************************************/
#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:8px solid #fff;width:600px;height:250px;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:96.3%;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;}

Save Template.

2. Pergi ke Layout➤Add a Gadget➤HTML/JavaScript, terus letakkan JavaScript berikut kedalamnya⇩

<!-- Email Subscription Box By www.BloggerAutodidact.com Starts -->
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Cookie Setting
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>
<!-- Email Subscription Box By www.BloggerAutodidact.com Ends -->

Catatan: Ganti tulisan yang berwarna biru "YOUR-USER-NAME" dengan Username FeedBurner anda.

Alhamdulillaah, Tutorial sudah siap.