Cara Pasang Widget Headlines By Feedburner di Dalam Postingan Blog

Selamat malam sobat. Kali ini Saya mau berbagi trik memasang widget di dalam postingan blog. Widget ini bisa saja ditukar dengan widget lain, atau berupa iklan  gambar, video dan yang lain. Tapi di sini Saya akan membuat widget dari Feedburner yang menampilkan artikel apa saja yang baru diposting. Menurut Saya, widget ini cukup menarik, karena letaknya di dalam postingan, jadi lebih memudahkan pengunjung mengetahui artikel yang terakhir diposting tanpa lirik kiri kanan.

Caranya tidak begitu rumit, jika sobat menggunakan trik ini yaitu memasang widget dari feedburner, tentunya sobat harus memiliki akun dari feedburner. Jika sobat tertarik, coba ikuti beberapa langkah berikut:

1. Masuk ke akun Blogger
2. Di laman dasbor, pilih Template => Edit HTML
3. Cari kode <data:post.body/>
Jika kode di atas ada yang lebih dari satu atau bahkan sampai tiga, kalau di blog Saya ada tiga. Letakkan kode di bawah ini di atas kode <data:post.body/>:

<div style='clear: right; float: right; margin-bottom: 1em; margin-left: 1em;'>
<style type='text/css'>
#accordion{width:200px;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(http://3.bp.blogspot.com/-tmvT594c400/UcQB43iw-QI/AAAAAAAAA-4/8FnxKQfICAM/s1600/SOME.png);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:transparent;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #000000;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(http://3.bp.blogspot.com/-tmvT594c400/UcQB43iw-QI/AAAAAAAAA-4/8FnxKQfICAM/s1600/SOME.png);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script src='http://yourjavascript.com/121511228073/accordion-menu.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&#39;#accordion .content&#39;).hide();
$(&#39;#accordion h2:first&#39;).addClass(&#39;active&#39;).next().slideDown(&#39;slow&#39;);
$(&#39;#accordion h2&#39;).click(function() {
if($(this).next().is(&#39;:hidden&#39;)) {
$(&#39;#accordion h2&#39;).removeClass(&#39;active&#39;).next().slideUp(&#39;slow&#39;);
$(this).toggleClass(&#39;active&#39;).next().slideDown(&#39;slow&#39;);
}
});
});
</script>
<div id='accordion'>
  <h2><b>Menu 1</b></h2>
<div class='content'>

<script src="http://feeds.feedburner.com/se-cara?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/se-cara"></a><br/>Powered by FeedBurner</p> </noscript>
 
</div></div>
 </div>

Keterangan: Kode berwarna biru bisa diganti dengan kode dengan kode widget akun feedburner sobat.
Jika sobat ingin menambah menu tab, contohnya pada widget di atas, cukup dengan menambahkan kode:
<div id='accordion'>
  <h2><b>Artikel Terbaru</b></h2>
<div class='content'>
 Isi konten
</div></div>
di atas kode </div> yang terakhir, yang hasilnya seperti ini:
<div id='accordion'>
  <h2><b>Menu 1</b></h2>
<div class='content'>

<script src="http://feeds.feedburner.com/se-cara?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/se-cara"></a><br/>Powered by FeedBurner</p> </noscript>

</div></div> 
<div id='accordion'>
  <h2><b>Menu 2</b></h2>
<div class='content'>
 Isi konten
</div></div> 
</div>

4. Klik simpan template dan lihat hasilnya.

Mungkin cukup sekian untuk postingan kali ini, untuk pertanyaan dapat di sampaikan lewat kotak komentar. Sekian