Widget Related Post With Thumbnails

Related post atau postingan terkait tentu sudak kita ketahui bersama fungsi dan manfaatnya, karena sebelumnya saya pernah mengetengahkan tutorial cara menambahkan related post pada blogger. Widget ini sebagaimana widget lainnya memang memiliki banyak versi, kalau yang sebelmnya hanya dilengkapi judul, widget berikut dilengkapi juga dengan thumbnails (image/gambar) yang dapat mempercantik tampilan related post pada blog anda. Widget ini juga bisa dengan mudah anda atur dan sesuaikan jumlah artikel terkait yang ingin ditampilkan atau merubah jenis huruf dan background hover dari link dll.
Widget berikut mirip pula dengan widget related post yang disediakan oleh link within, nah jika anda tidak ingin menggunakan widget dari pihak ketiga silahkan mencoba tutorial berikut:

1. seperti biasa, silahkan loggin dahulu ke account blogger anda, pada dasbor pilih atau klik rancangan >>> edit HTML >>> jangan lupa untuk mencentang kotak kecil disamping tulisan Expand Template Widget.
2. Tekan control F dan cari kode </head>
3. Selanjutnya letakkan kode berikut diatas kode nomor dua tadi:

<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/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>
</b:if>

4. Kemudian cari kode berikut:
<div class='post-footer-line post-footer-line-1'>
atau
<div class='post-footer-line post-footer-line-3'>
atau
<p class='post-footer-line post-footer-line-1'>
atau
<p class='post-footer-line post-footer-line-3'>
5. Selanjutnya letakkan kode berikut setelah kode atau dibawah kode nomor 4 tadi:

<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://amatulla83.blogspot.com' 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=&quot;Related Posts&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

Kode diatas bisa anada rubah lagi untuk menyesuaikannya dengan blog anda.
6. Selesai, silahkan simpan template dan lihat hasilnya diblog anda.

Categories: Totorial Blogging