Related Post Bergambar (Thumbnail)

Apakah soba ingin mempercantik blog sobat? tentu jawabannya "iya". Mungkin widget satu ini bisa sobat gunakan untuk membuat blog sobat tampak lebih menarik. Nama widgetnya adalah related post bergambar atau dalam bahasa inggris thumbnail related post, dinamakan related post bergambar atau thumbnail related post karena tampilannya cukup menarik dengan adanya gambar atau thumbnail. Widget ini terletak di bawah postingan sobat. Postingan yang berkaitan dengan postingan yang sedang dibuka akan ditampilkan dibawahnya secara otomatis. Sebagai contohnya lihatlah gambar dibawah ini:

Langkah-langkahnya adalah sebagai berikut :

1. Login ke Blogger
2. Design (Rancangan) => Edit HTML =>  Centang Expand Widget Template
3. Cari Kode  </head>  (cari dengan Ctrl+F / Ctrl+G)
4. Letakkan Kode di bawah ini tepat di atas 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: #585858;
font-family: Georgia, &#8220;Times New Roman&#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;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

5. Kemudian Cari Kode  <div class='post-footer'>

6. Masukkan Kode  bawah ini tepat diatas kode  <div class='post-footer'>

<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>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

7. Save Template, selesai.

Catatan: "pada var maxresults=8;" Angka 8 bisa sobat ganti sesuai dengan jumlah tampilan related post sobat inginkan.