Memasang Related Post 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). Sebelumnya Pak Guru pernah berbagi tentang related post dan juga memasang related post di bawah postingan. 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 check 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

Jumlah tampilan related post ada 5 dan kita bisa merubahnya sesuai keinginan kita.

var maxresults=5;

Kita juga bisa merubah tulisan Related Posts dengan judul lainnya

var relatedpoststitle="Related Posts";

Untuk melihat contoh dari pemasangan Related Post dengan Thumbnails ini, kunjungi electronicareas.com

Ok..Good luck !!!

Berlangganan via RSS Feed

Enter your email address:

Delivered by FeedBurner

Related Posts on blogger widgets, Blogging Tips, blogspot tips