Membuat Related Post (Artikel Terkait) Pada Blog

Hari ini saya akan mmberikan tips untuk blog, yaitu gimana caranya membuat Realated Post (Artikel Terkait) dengan efek thumbnail alias ada gambarnya hehe yang diletakkan di bawah postingan kita... contohnya liat di gambar aja..

Langsung aja...

• Login ke Blogger
• Masuk ke edit HTML, dan langsung centang/contreng/checklist Expand Widget Template
• Cari Kode tag </head> (cari dengan Ctrl+F)
• Letakkan kode Script  di bawah ini tepat di atas kode tag </head> tadi 

&lt;!--Related Posts with thumbnails Scripts and Styles Start--&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;style type=&quot;text/css&quot;&gt;
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, &amp;#8220;Times New Roman&amp;#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
&lt;/style&gt;
&lt;script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/&gt;
&lt;/b:if&gt;
&lt;!--Related Posts with thumbnails Scripts and Styles End--&gt;

• Kemudian Cari Kode Tag  <div class='post-footer'>
• Masukkan Kode Script di bawah ini tepat diatas kode tag  <div class='post-footer'> 

&lt;!-- Related Posts with Thumbnails Code Start--&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;div id='related-posts'&gt;
&lt;b:loop values='data:post.labels' var='label'&gt;
&lt;b:if cond='data:label.isLast != &amp;quot;true&amp;quot;'&gt;
&lt;/b:if&gt;
&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
&lt;script expr:src='&amp;quot;/feeds/posts/default/-/&amp;quot; + data:label.name + &amp;quot;?alt=json-in-script&amp;amp;callback=related_results_labels_thumbs&amp;amp;max-results=6&amp;quot;' type='text/javascript'/&gt;&lt;/b:if&gt;&lt;/b:loop&gt;
&lt;script type='text/javascript'&gt;
var currentposturl=&amp;quot;&lt;data:post.url/&gt;&amp;quot;;
var maxresults=8;
var relatedpoststitle=&quot;Related Posts&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
&lt;/script&gt;
&lt;/div&gt;&lt;div style='clear:both'/&gt;
&lt;/b:if&gt;
&lt;!-- Related Posts with Thumbnails Code End--&gt;

• Save Template

*pada kode var maxresults=8; di atas, angka 8 bisa kalian ganti sesuai dengan yang kalian mau.

thanks to Aini Sastra