Artikel Terkait (Related Post) dengan Thumbnail

Related post pada blogger bisa dibikin lebih menarik lagi dengan adanya gambar thumbnail (seperti pada blog ini). Tujuannya lebih menarik pembaca untuk mengkliknya. Seblumnya pastikan setiap posting yang kamu buat ada unsur gambar didalamnya (gambar apa saja dan posisi dimana saja terserah).




Caranya lebih kurang sama dengan related post tanpa gambar :
1. Login ke blogger dashboard > Layout > Edit HTML dan cek "Expand Widget Templates" boks

2. Cari tag :
</head>

3. Kopi kode ini tepat diatasnya:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg02FZnSvZ44zOS5f87NS6KciPpl_b2W1ZZ5Kw6VfSgJOK1XmR_x2CVp20mourwtfNEy4wgAERxl73gFAgRD58DKeoJHkCstwFNlbwKwuBcFy6ws_9DBFH813GVoR5qgDQpqb60Bd2hCSs/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Kemudian cari kode ini :
<div class='post-footer-line post-footer-line-1'>

atau ini (mana saja yang dapat):
<p class='post-footer-line post-footer-line-1'>

Kopikan kode ini tepat dibawahnya (salah satu diatas mana yamg ketemu):


<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<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 gadgets</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Save, selesai.

Untuk merubah jumlah thumbnailnya ganti angka pada :
var maxresults=5;

Untuk mengganti kata Realted Post dengan maunya kita ganti cari frase ini:
var relatedpoststitle="Related Posts";

Untuk mengganti thumbnailnya :
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg02FZnSvZ44zOS5f87NS6KciPpl_b2W1ZZ5Kw6VfSgJOK1XmR_x2CVp20mourwtfNEy4wgAERxl73gFAgRD58DKeoJHkCstwFNlbwKwuBcFy6ws_9DBFH813GVoR5qgDQpqb60Bd2hCSs/s400/noimage.png";