Cara Membuat Artikel Terkait Dan Kotak Feedburner

How to Make Related Articles And Box FeedBurner : Artikel terkait atau biasa kita kenal dengan bahasa Inggris Related Articles adalah widget yang menampilkan tautan artikel yang ada pada blog tersebut yang masih dalam satu kategori dengan artikel yang sedang di baca pengunjung, sedangkan Feedburner adalah salah satu layanan gratis untuk membantu mempublikasian artikel yang ada pada blog dan pengunjungpun bisa berlangganan artikel lewat Feedburner Anda. Pada umumnya kedua fungsi ini terpisah pada blog, namun pada artikel ini saya akan memberikan tips agar keduanya berdamping dan letaknyapun dibawah posting. Widget ini sebenarnya terpasang pada beberapa template demo maskolis (mastemplate.com) namun scriptnya saya ambil dan posting disini jadi sebelum melanjutkan pada tutorial saya mohon maaf terlebih dahulu kepada maskolis karena saya ambil tanpa sepengetahuan beliau. Demo anda bisa lihat pada template maskolis disini.

Tutorial :

1. Simpan CSS ini di atas ]]></b:skin> atau </style>

#related{background:#222; border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
#related .related-posts{font-weight:400;width:50%;float:right}
#related .related-posts p{margin:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
#related .subscribe{width:43%;float:left;color:#bdbdbd;}

2. Selanjutnya simpan kode pemanggilnya di bawah ini tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Related Articles</p>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRzakM0_nYlMdvZeIaIEbMmUzufzWoprCSwOtPZVPHmpRdkdBEVrin2GCUMFtqnyVqP7bc5pCkrvfctY9I2XphOPxbIP6nQHX9_tsosvSPxwd6TQUkxrAzp87mIIl-iJEbBZ2z1F1Gdyo/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<script src='http://yourjavascript.com/1198561349/relatedimg.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>              
</div>
<div class='subscribe'>
<p class='intro'>If you enjoyed this article just <a href='http://feeds.feedburner.com/Lagi Oke' target='_blank' title='feedburner'>
<b>click here</b></a>, or subscribe to receive more great content just like it.</p>
<p class='feed'><a href='http://lagioke.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=IDblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='tutorianes'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='botsub' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input id='botsubbutton' type='submit' value='Submit'/><br/>
<small>Your information will not be shared. Ever.</small><br/>
<a href='http://feeds.feedburner.com/IDblog'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/IDblog?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
</form>
</div>
</div>
</b:if>

Keterangan :
Bilah terdapat lebih dari 2 code <data:post.body/> letakkan pada kode yang terakhir
Ganti IDblod atau Url feedsburner dengan feedsburner Anda
Sedangkan berwarna kuning silahkan ganti dengan nama Blog Anda