Membuat Related Post " Thumbnails"

Sekarang ane akan berbagi trik tentang membuat Realated Post dengan Thumbnails, ini sebagai pilihan membuat Related Post selain menggunakan textlink. Related Post sangat membantu kita untuk meningkatkan jumlah halaman yang dibuka oleh pengunjung blog, karena letaknya setelah postingan dan isinya yang berkaitan. Sebagai contoh Related Post dengan Thumbnails sobat bisa lihat dibawah postingan blog ini, atau ane kasih aja deh ..

Trus gimana caranya biar bisa kaya gitu, ini dia triknya

1. Pertama sobat masuk ke halaman Edit HTML, truz beri tanda centang pada "Expand Widget Templates"

2. Cari kode ini </head>

3. Selanjutnya ganti kode tadi dengan kode dibawah ini


<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

</head>

4. 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 ini dibawah salah satu dari kode diatas yang sobat temukan.


<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>
<b:if cond='data:blog.pageType == "item"'>
<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: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="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>


5. Kemudian simpan dan nikmati hasilnya ...

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

var maxresults=5; (tinggal ganti angka 5 dengan yang anda inginkan)

Untuk mengganti title, sobat bisa mengedit kode ini:

var relatedpoststitle="Artikel yang berkaitan"; (ganti kalimat Artikel yang berkaitan dengan title keinginan sobat)

eh ia .. makasih buat 0-0m.com yang telah berbagi ilmunya.