Membuat Related Post Dengan Thumbnails

Setelah beberapa waktu tidak melakukan update pada blog zona-klik, kali ini admin akan memberikan sedikit tips seputar blog kepada pembaca setia zona-klik yang mungkin telah lama menunggu posting terbaru pada blog ini. Adapun posting kali ini zona-klik ingin sharing tentang "Membuat Related Post Dengan Thumbnails". Sebelumnya zona-klik sudah pernah menulis artikel tentang related post atau artikel terkait dibawah posting  yang bisa di baca disini dan disini. Dimana Related Post tersebut berbeda dengan Related Post yang dibahas pada artikel ini. Related Post pada artikel sebelumnya hanya menampilkan link judul posting dibawah artikel  yang berhubungan dengan artikel yang sedang dibaca, sedangkan related post dengan thumbnails akan menampilkan link judul beserta gambar.

Berikut adalah lagkah-langkah yang harus dilakukan untuk membuat Related Post Dengan Thumbnails :

1. Login ke account blogger anda

2. Masuk ke halaman Edit Html dan jangan lupa beri tanda centang pada "Expand Widget Templates"

3. Cari dan temukan kode </head>

4. Gantilah kode tersebut 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>

5. Cari dan temukan lagi kode dibawah ini pada halaman Edit HTML Template blog anda 

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

6. Letakkan kode dibawah ini persis dibawah kode diatas

<!-- 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-->

7. Simpan Template

Apabila langkah-langkah diatas di lakukan dengan benar coba lihat hasilnya pada blog anda, maka related post dengan thumbnails muncul pada halaman posting.

Semoga bermanfaat.