Cara Membuat Related Post Blogspot dengan Thumbnails

Kali ini saya coba ingin membahas bagaimana caranya membuat related post pada blogspot dengan thumbnails di bawah postingan. Sama seperti related post di blog ini

Saya akan coba menjelaskannya sedetail mungkin agar anda bisa mengikutinya dengan mudah. Oke... langsung aja kita ke tahap-tahapnya :

Untuk pertama seperti biasa, anda login ke Blogger > Rancangan > Edit HTML. Jangan lupa untuk mencentang "Expand Widget Templates"

Kemudian cari code : </head>

Pastekan kode dibawah ini tepat diatas nya :

<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/AVvXsEhq5szThVNI-8mCAI3WLgAuErtOXJSO1OM7dhrfSTNGp79w-TwM-1Noju_HAMUsM1bRQWzAbdIX6ffN4dhVRRD0XMr-Zmhc4WL7JtUE7xz8OS8NFZsWsIl-6UPH_HXSaw9es4drtHAkEug/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'/>
</b:if>

Nah sekarang cari kode ini :

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

Kalau ga ada kode di atas coba cari kode ini :

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

Sekarang ganti salah satu kode di atas dengan kode ini :

<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'/>
</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>

Silahkan di review dulu, udah jadi apa belum. Kalu jadi, sekarang tinggal mengeditnya. Secara default related post terdiri dari 5 postingan. Anda bisa merubahnya sesuai selera anda. Cari kode dibawah ini untuk mengedit jumlah related post anda :

var maxresults=5;

Jika ingin merubah kata "Related Post", anda bisa merubahnya di kode ini :

var relatedpoststitle="Related Posts";

Jika postingan anda tidak mempunyai gambar (thumbnails), tampilannya akan mengikuti defaultnya. Anda bisa merubahnya juga di bagian ini :

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq5szThVNI-8mCAI3WLgAuErtOXJSO1OM7dhrfSTNGp79w-TwM-1Noju_HAMUsM1bRQWzAbdIX6ffN4dhVRRD0XMr-Zmhc4WL7JtUE7xz8OS8NFZsWsIl-6UPH_HXSaw9es4drtHAkEug/s400/noimage.png";

Nah sekarang postingan anda sudah dipercantik dengan related post yang profesional. Ini salah satu strategi agar anda tidak kehilangan pengunjung. Memberi kemudahan si pembaca untuk beralih ke postingan blog anda yang lain. Oke..selamat mencoba n semoga berhasil !!