Masih segar dengan related posts. Kalau masih, nih yang terbaru. Si Aneeshmenciptakan widget related posts with thumbnails yang mirip dengan related posts LinkWithin. Bedanya hanya cara pasangnya doank. Kita akan dihadapkan dengan kode script CSS yang ditambahkan pada template blog anda. Gambarnya seperti ini :

related-posts-bloggerwidget
Gimana, pasti anda sudah pernah melihat widget seperti itu. Nah, anda bisa memasang widget ini dengan membaca tutorial si Aneesh di Blogger Widget. Tapi biar gampang saya buat juga di sini dalam versi bahasa indonesia. Oke, langsung saja ke intinya.

Pasang Related Posts with Thumbnails dari Aneesh

  1. Login ke blogger dengan id anda
  2. Tuju Layout
  3. Pada tab menu pilih Edit HTML
  4. Centang kotak kecil Expand Template Widget
  5. Cari kode </head>
  6. Kemudian ganti kode itu dengan kode di bawah ini :
    <!--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-->
</head>
  7. Kemudian cari lagi kode di bawah ini :
    <div class='post-footer-line post-footer-line-1'>
    Bila anda tidak menemukan kode di atas, carilah kode ini :
    <p class='post-footer-line post-footer-line-1'>
  8. Bila sudah ketemu, masukkan kode berikut di bawah kode tadi :
    <!-- 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 widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
  9. Sekarang klik tombol SAVE TEMPLATE
  10. Selesai
Atur jumlah related posts thumbnails yang ditampilkan pada kode ini :
var maxresults=5;
Anda juga bisa mengganti judul (title) widget pada kode ini :
var relatedpoststitle="Related Posts";
Jika tidak ada kesalahan, maka thumbnail related post ini akan muncul tepat di bawah posting anda. Contohnya seperti gambar di bawah ini :

related-posts-with-thumbnails-blogger-widget
Saat ini saya tidak memasang widget ini karena saya sudah pasang related posts fungsi scrolling. Oke, selamat mencoba dan semoga berhasil. Thanks Aneesh.