Membuat Subscription Form 'Kotak Berlangganan' Ala Wordpress

Patut kiranya seorang blogger berbagga ria atas tips kali ini. Pasalnya, pada tutorial kali ini akan dibahas tentang topik membuat kotak berlanggan artikel terbaru (Subscription Form Feed Burner kata orang madura) seperti wordpress. Karena banyaknya fans yang menginginkan berlangganan artikel yang diposting blog kita, sebaiknya pemilik blog membaut gadget seperti ini.

Tanpa panjang lebar karena tutorial lainnya sudah dibahas disini. dan jika ingin llihat contohnya disini.
Langsung apada langkahnya :

• Login Blogger;
• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget)
• Pilih HTML/JavaScript
• Copy paste kode dibawah kedalam HTML tersebut;
• Lalu Simpan, selesai.

<style>
.kodbar{width: 100%; float: left;}
.kodbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
.kodbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: top; padding-right:3px;}
.kodbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.kodbar .subicons a{text-decoration: none; color:#333333;}
.kodbar .subicons a:hover{text-decoration: underline; color:#333333;}
.kodbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfk3_W58zFAnRNCX7MWeVtzVPtrxpM4NlIBXjYOaObnP20uADE1rjpauIhIDJjO5JINkFyBIrUZfyxNDDzBY-gJafoy2HKC6fLJnREOqSFuEICASISX1VUPNxhE2s_bK8pDhnIA-xUQQs/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.kodbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4jMWuf9YLlIANNpoyTNh8-60GfVA4q-sPotw90VzzxEOrR7Sj-fSpMaAS6ahCdFhKMsRaK7SC6coChh2KssFJfatw63UQehoSe6mZre6_ttjEqXAQ-CY1fcfaddBf_OFVbJg370NNnpc/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.kodbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCDOz34pSjOVslsraib25ZNKGCHg3PqHdqZH9kVRJI2CzCCgXis6XCqPTnE5lm7Ur2qk8VZjZRdWpnrNbnen2uD5V_PpF6m4ObqXskqKuc8Vzrk4K-VSeK2U9s5q10FiGIK5tFCxbSYpE/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.kodbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.kodbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGs_wJaJmUZKfbCOrOBdniSKEAwd86Gpe6-1JW0e-Uf-gIHeQ3ZwtJkZY6hxgJK1ntn0mU4n-YCDP9r-dlE5kwr15CrrkdWgxDwBc16eFGdERtte2z0-u8Unj9wUWYkrc7VQfYJgjuO6E/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
.kodbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.kodbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.kodbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>
<!--[if IE 7]>
<style>
.kodbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
.kodbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
</style>
<![endif]-->
<div class="kodbar"><div class="count">Join <span class="bigcount">5032+</span> Orang Following KOD</div><div class="subicons"><div class="rssicon"><a href="http://feeds.feedburner.com/KangOnkDesign" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/pages/Kang-Onk-Design/113506822070307" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/onkdesign" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Berlanggan Artikel terbaru</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=KangOnkDesign', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Masukkan Email Anda....." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Masukkan Email Anda.....&#39;;}" onfocus="if (this.value == &#39;Masukkan Email Anda.....&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="KangOnkDesign" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div>

Catatan :

1. Ubahlah http://www.facebook.com/pages/Kang-Onk-Design/113506822070307 dengan halaman link profil facebook anda;
2. Ubahlah http://twitter.com/onkdesign dengan URL link twitter anda;
3. Ubahlah http://feedburner.google.com/fb/a/mailverify?uri=KangOnkDesign dengan feedburner RSS Email Link anda;
4. Ubahlah http://feeds.feedburner.com/KangOnkDesign dengan feedburner RSS link anda.

Selamat mencobna dan semoga berhasil.
Jangan lupa komentarnya dan klik google +1 di pojok kanan atas. Terima kasih.