Membuat Related Post + Thumbnails

Pada tutorial sebelumnya saya pernah membahas bagaimana cara membuat related post tampil di sidebar, pada postingan kali ini saya akan membahas bagaimana cara membuat related post/artikel yang berhubungan dengan thumbnails/tampil dengan gambar. dulu ketika saya menggunakan trik ini masih default menggunakan linkwithin tapi kini dengan modifikasi kita sendiri kita dapat membuatnya, sedikit modifikasi namun hal itu berpengaruh buat blog sobat semua.
banyak artikel yang menerangkan mengenai trik ini, namun keinginan saya untuk berbagi tidaklah sekecil kemungkinan SEO blog ini masuk di urutan teratas google :D. saya sempat menggunakan juga related post yang tampil dibawah posting yang tanpa thumbnails tapi setelah dihapus dan memasang related post dengan thumbnails ternyata lebih menarik apalagi buat blog yang diperuntukan download software, design itu sangat diperlukan.
lalu, bagaimana cara membuatnya? mari kita ikuti tutorialnya.
Login ke account blog anda
Klik rancangan lalu klik edit html
Klik expand widget templates

Cari kode ini </head>

Kemudian ganti 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://sites.google.com/site/asrizalofficialweb/javascript/relatedthumbs21.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End--> </head>

Sekarang cari lagi kode dibawah

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

Jika tidak menemukan kode diatas, coba cari kode seperti ini

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

Kalo sudah ketemu, tinggal masukan semua kode dibawah ini dibawah salah satu dari kode diatas yang sobat temukan.

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

Untuk menampilkan berapa banyak jumlah related posts bisa dengan mengedit kode dibawah ini:

var maxresults=5;

Untuk mengganti title, kita bisa mengedit kode ini:

var relatedpoststitle="Related Posts";

Selamat mencoba :)