Ketika mengunjungi sebuah blog dengan engine blogger, mungkin anda sudah pernah melihat widget related post yang muncul pada akhir postingan, yaitu related post dengan thumbnail seperti dibawah ini :
Widget related post diatas tidak berbeda dengan widget related post biasa. Kelebihannya adalah adanya thumbnail postingan yang menyertai, sehingga tampilannya akan lebih mempercantik blog dan lebih deskriptif. Related post ini juga akan menampilkan postingan-postingan dengan label yang sama. Untuk pemasangannya, ikuti langkah-langkah dibawah ini :
Membuat related post dengan thumbnail :
1. Log-in ke dahboard blogger, dan pilih tab rancangan, kemudian pilih menu edit HTML. Jangan lupa untuk melakukan cetang pada box "expand widget template".
2. Setelah itu, temukan kode dibawah ini
</head>Kemudian ganti kode diatas dengan
<!--Related Posts with thumbnails Scripts and Styles Start-->3. Sekarang temukan kode
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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/AVvXsEhNA7gMJjvEBg4TSJmDjnLVtPWeLLicORwmH2f6MhqwTmZEv-BlLpZlvgrav_iBqAVSiMk2uX5vTquzDj5sMdLqz_KYvwk6ew2ypxGJRJ6TwwSsKdMVeJuFqRccWZGiFld248P_Q9R-ORo/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-->
</head>
<div class='post-footer-line post-footer-line-1'>jika tidak ada, temukan kode dibawah ini
<p class='post-footer-line post-footer-line-1'>Setelah menemukan salah-satu kode diatas, taruh kode berikut tepat Setelahnya
<!-- Related Posts with Thumbnails Code Start-->Simpan template anda.
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
4. Untuk mengedit jumlah post yang dtampilkan, edit pada var maxresults=5;
5. Untuk menggatu title related post tersebut, edit pada var relatedpoststitle="Related Posts";
6. Untuk merubah default thumbnail, edit pada kode dibawah ini
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNA7gMJjvEBg4TSJmDjnLVtPWeLLicORwmH2f6MhqwTmZEv-BlLpZlvgrav_iBqAVSiMk2uX5vTquzDj5sMdLqz_KYvwk6ew2ypxGJRJ6TwwSsKdMVeJuFqRccWZGiFld248P_Q9R-ORo/s400/noimage.png";
7. Anda juga bisa merubah properti warna pada CSS kode related post diatas.
Silahkan dicoba. Jika langkah-langkah diatas dilakukan dengan benar, maka related post ini akan muncul tanpa masalah.
