Disain Grafis, Tips dan Triks

Widget FeedBurner (Kotak Berlangganan Artikel) di Bawah Postingan Blog

Cara Memasang Widget FeedBurner di Bawah Postingan Blog - Untuk memudahkan pembaca mendapatkan update artikel blog anda, maka perlu dibuat widget berlangganan feedburner di blog. Penempatan widget berlangganan feedburner untuk pengunjung yang ingin berlangganan artikel bisa diletakan dimana anda sukai misalnya di sidebar kanan. Pada tutorial kali ini widget berlangganan artikel akan dipasang di bawah postingan blogspot. Untuk screenshot dari widget berlangganan feedburner yang akan saya buat dan diletakkan dibawah post blog seperti dibawah ini, keren bukan?

Membuat Widget FeedBurner di Bawah Postingan Blog

Cara Memasang Widget Berlangganan Feedburner di Bawah Postingan Blog
1. Buka ke blog anda
2. Pilih Template => Edit HTML
3. Tekan Ctrl+F dan cari kode ]]></b:skin>
4. Letakkan kode berikut diatasnya

.rss-wrapper{background-color:#fff;-moz-border-radius:5px;border:1px solid #A4A4A4;margin:0 0 10px;padding:5px 10px}
.Rsserma{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpI9woAWPV_TzswVequfSaWLAwwWbDfZ-abnE7Ly4-BcxdaxJage6866v4_gEdbYK3Dxdn3yC6JRLal7ZKjA_un7_UAyHAXYYWOBvkQm8ilO3T_xPb0eK7Qfxbsaamznv5rUUzWBs_9BY/s1600/feedburner.jpg) no-repeat bottom right}
.Rsserma a{background:none}
.inpRsserma{border:1px solid #B9C1C6;width:170px;font-size:11px;padding:3px 4px 4px 10px}
.sbmtRsserma{padding:2px}
.ermasubs table{border-collapse:inherit;border:none}
.clear{clear:both}

5. Selanjutnya anda cari kode <data:post.body/> yang ke 2 dan paste kode berikut dibawahnya.

<div class='rss-wrapper'>
<div class='Rsserma'>
Jika Anda menyukai artikel di blog ini, silahkan <a href='http://feeds.feedburner.com/tips-erma' target='_blank' title='Berlangganan'>
<b>Klik Disini</b></a> untuk berlangganan secara gratis via email, dengan begitu anda akan mendapat kiriman artikel setiap ada artikel yang terbit di <font color='#0099DD'>Ermawati</font>
<div class='ermasubs'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='left' style='padding:5px 0 0 0;' valign='top' width='65%'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tips-erma&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'>
<input class='inpRsserma' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketikkan email anda disini&quot;;}' onfocus='if (this.value == &quot;Ketikkan email anda disini&quot;) {this.value = &quot;&quot;;}' type='text' value='Ketikkan email anda disini'/>
<input name='uri' type='hidden' value='tips-erma'/>
<input name='title' type='hidden' value='tips-erma'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='sbmtRsserma' type='submit' value='Subscribe'/></div>
</form></td>
<td align='left' style='padding:10px 0 0 0;' valign='top' width='35%'><a href='http://feeds.feedburner.com/tips-erma'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/tips-erma?bg=99CCFF&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
</td></tr></table></div></div></div>
<div class='clear'/>

Catatan :
- Teks warna merah silahkan ubah ganti dengan feedburner anda
- Teks warna biru silahkan ubah dengan nama blog anda

6. Simpan template

Demikianlah Cara Membuat Widget Berlangganan Feedburner berada di Bawah Post Blog, semoga bermanfaat.