Cara Membuat Widget Berlangganan Feedburner di Blog

Cara Membuat Widget Berlangganan Feedburner di Blog - Kali ini saya akan mengajarkan kepada anda Cara Membuat Widget Berlangganan Feedburner di Blog.

Feedburner adalah layanan umpan/feeds web dari Google. Penggunaan layanan Feedburner ini bermanfaat sekali untuk SEO pada Web/Blog yang kita miliki. Selain itu dengan Feedburner ini kita juga dapat memperoleh lebih banyak pengunjung di Web/Blog kita. Merekapun dapat berlangganan artikel melalui Email, jadi jika kita membuat artikel baru artikel secara otomatis akan dikirim ke alamat email yang telah terdaftar di Feedburner.

Feedburner sebenarnya sudah ada di Daftar Widget TataLetak Blogger tetapi kurang menarik pengunjung untuk berlangganan artikel.

Gambar Widget yang ada di Blogger:

Berikut adalah langkah-langkah Cara Membuat Widget Berlangganan Feedburner di Blog:

1. Login ke Blogger.

2. Masuk ke Template dan klik Edit HTML.

3. Carilah kode ]]></b:skin> . Untuk mempermudah pencarian tekan Ctrl+F dan letakan kode berikut di atas kode ]]></b:skin>.

.form {

border:1px solid #ccc; /* warna garis pinggir form */

background: #ffffff /* warna background form */

padding:3px; /* spasi form */

width:100%; /* panjang form */

height:auto /* tinggi form */

}

.rss {

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDTww86NP7kxziGg2O5e6FtVyNQcspYY_jKKi1p06CA9kBh_1fNkeZA7zS5CookIrj-n8TOK7hhtLfsb3fe9-QzPE65LoLgufyYlL_GLoFwfVOq4nXjgNmJ82E38VVK8bjbRm63pYdNvs/s1600/Membuat+Widget+Berlangganan+Feedburner+Di+Blog.png") no-repeat top right;

}

4. Simpan Template.

5. Selanjutnya MASUK Tata Letak.

6. Klik Tambahkan Gadget dimana saja posisinya.

7. Pilih HTML/Javascript dan masukanlah kode dibawah ini:

<div class="form">
<div class="rss">
<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzSfugOUA6rsNR1futnZtQR6d02tni0gsNf7MiAtMLW2VGvV0NCuVUR4yj0-eh1pr-plOGyZZAFS8bv74RhI179NQJGErF53Ab5PptpSK6qfqllgxGzq7Z7sKI_mavG27lMvk3ECuSdp5t/s1600/small+rss.png" alt="small rss IDFEEDBURNER" title="RSS Feed"/> <a href="http://feeds.feedburner.com/IDFEEDBURNER" rel="nofollow" target="_blank">LANGGANAN ARTIKEL</a></div>
<div style="font-weight:bold; padding:10px 10px;">GET UPDATE VIA EMAIL</div>
<div style="padding-left:10px">Berlangganan artikel via email!</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=IDFEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" value="Ketik email anda disini..." /> <input type="hidden" value="IDFEEDBURNER" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="SUBCRIBE" /></div></form>
<div style="padding-left:10px"><p><a href="http://feeds.feedburner.com/IDFEEDBURNER" rel="nofollow" ><img src="http://feeds.feedburner.com/~fc/IDFEEDBURNER?bg=FF6600&amp;fg=FFFFFF&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p></div>
</div></div>

NB: Kode berwarna Merah ubah dengan ID Feedburner anda yang ada Blog Anda.

8. Silahkan Simpan... 

Jika anda sudah mengikuti langkah-langkahnya dengan benar hasilnya akan seperti gambar di bawah ini: