Menampilkan Postingan yang Berhubungan + Gambar (thumbnails)

Wah klo yang satu memang lebih keren dari pada postingan q yang sebelumnya -> Menampilkan Artikel yang berhubungan secara otomatis dibawah postingan. Widget kali ini selain menampilkan artikel / postingan yang berhubungan (related post) juga menampilkan gambarnya secara otomatis di bawah postingan blog kita. Nah, dengan begitu akan memudahkan pengunjung untuk mencari artikel yang mereka inginkan. Untuk memasang widget ini silahkan ikuti langkah-langkah dibawah ini

Live Demo

1. Pertama, Login dulu, kemudian pergi ke halaman Edit HTML, jangan lupa memberi tanda centang pada  "Expand Widget Templates"


2. Cari kode ini </head>
(untuk mempermudah pencarian tekan CTRL + F )


3. Kemudian GANTI dengan kode dibawah 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>

4. Sekarang cari lagi kode dibawah

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

Jika tidak menemukan kode diatas, coba cari kode seperti ini

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

Kalo sudah ketemu, tinggal masukan semua kode dibawah ini DIBAWAH salah satu dari kode diatas yang sobat temukan.

<!-- 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://hitsuke.blogspot.com/2009/11/menampilkan-postingan-yang-berhubungan.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-->

5. jangan lupa disimpan dah lihat hasilnya



Untuk menampilkan berapa banyak jumlah related posts bisa dengan mengedit kode dibawah ini:



var maxresults=5;



Untuk mengganti title / judul , kita bisa mengedit kode ini:



var relatedpoststitle="Related Posts";



Selamat Mencoba ya sobat.. ^_^
Note: Widget ini sebenarnya sudah dibahas tuntas oleh pembuatnya Aneesh diblognya disini