Memasang Related Post gambar dengan Thumbnails

Semakin hari penampilan sebuah blog semakin ciamik karena salahs satunya dengan semakin beragamnya widget blog yang bisa kita gunakan. Salah satu sidget blog yang bisa bikin blog lebih ciamik adalah Related Post with Thumbnails (lihat gambar samping). Related post with thumbnail ini saya temukan ketika sedang jalan-jalan ke bloggerplugins. Paling tidak dengan Related Post bentuk ini, semakin memberikan pilihan untuk blog kita.

Untuk memasangnya, silakan baca terus..

1. Log in

2. Klik Layout

3. Klik Edit HTML dan checkhttp://www.blogger.com/post-edit.do Expand Widget Template

4. Backup Template Blog dengan cara mendownload Full Template.

5. Cari kode ini

</head>

6. Ganti kode diatas 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. Cari kode di bawah ini

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

atau kalau kode diatas tidak ada, 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 lihat hasilnya

tanda merah bisa di ganti sesuai dengan keinginan kita

var maxresults=5;

Kita juga bisa merubah tulisan Related Posts dengan judul lainnya

var relatedpoststitle="Related Posts";