Membuat Artikel Terkait / Related Artikel Bergambar ( Thumbail ) Pada Blogspot

Sobat.. Tips kali ini saya yakin banyak yang mau soalnya tampilan artikel terkaitnya cakep ada gambarnya, tepat dibawah postingan kita, sobat bisa lihat di blog ini.

Langsung aja sobat ke TKP

1. Sekarang masuk ke Edit HTML.

2. Jangan lupa di backup dahulu ya.

3. Klik Expand Template Widget.

4. Kemudian letakkan kode berikut ini, tepat diatas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->

<b:if cond="data:blog.pageType == &quot;item&quot;">
<style type="text/css">
#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: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}


#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src="http://blogergadgets.googlecode.com/files/relatedthumbs21.js" type="text/javascript">
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. Kemudian cari kode berikut ini :  

<div class='post-footer-line post-footer-line-1'>

6. Jika sudah ketemu, kemudian letakkan kode berikut tepat setelah kode diatas :

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

7. Lalu Save Template.

Keterangan : Angka 4 menunjukkan jumlah post yang akan ditampilkan sedangkan Related Posts adalah judulnya. Kedua tersebut bisa diganti sesuai dengan keinginan.

sumber http://www.bunli.com/2010/12/membuat-artikel-terkait-related-artikel.html