Related Posts by Categories dengan Thumbnails bergambar

Udah lama tidak posting sesuatu.., mungkin karena terlalu sibuk dengan urusan kantor hingga saya hampir lupa kalau blog saya yang acak-acakan ini artikelnya itu-itu saja. Pada postingan saya terdahulu, saya pernah menampilkan cara memasang Related Posts by Categories dengan tampilan link. Kali ini saya ingin berbagi tentang membuat Related Posts by Categories (artikel yang berhubungan) dengan thumbnails bergambar. Saya yakin tutorial ini udah sering ditampilkan tapi saya cuma menampilkan kembali untuk menambah koleksi tutorial blog saya yang masih sangat sedikit dan mungkin bisa bermanfaat buat teman-teman yang membutuhkan.

Untuk memasangnya tentu saja sangat mudah, ikuti caranya sebagai berikut...

1. Login ke akun blogger anda

2. Klik Layout

3. Klik Edit HTML dan beri centang Expand Widget Template

4. Backup Template Blog anda dengan cara Download Full Template untuk berjaga-jaga bila nantinya terjadi kesalahan.

5, Kemudian cari kode </head>

6. Diatas kode tersebut tambahkan kode berikut 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-->

7. kemudian Cari kode di bawah ini:

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

atau kalau kode diatas tidak terdapat pada Edit HTML template anda, bentuknya bisa seperti ini:

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

8. Letakan kode di bawah ini tepat di bawah salah satu kode di atas:

<!-- 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. Klik Save Template dan silahkan lihat hasilnya.


Keterangan:

Tulisan yang berwarna merah diatas adalah jumlah tampilan Related Post. Silahkan anda ganti angka 5 pada var maxresults=5; sesuai keinginan anda.
Kita juga bisa merubah tulisan Related Posts pada var relatedpoststitle="Related Posts"; diatas dengan judul lainnya.

Ok selamat mencoba...