Cara Membuat Relate Post Dengan Thumbnail

LIBAS HABIS. Untuk Para web master atau blogger, ini adalah salah satu bagian terpenting. Mengapa salah satu bagian terpenting? Dengan adanya ralate post pengunjung bisa dengan mudah melihat isi dari post-post kita lainnya.

Cara ini hampir sama dengan dengan ralate post dengan menggunakan jasa situs Linkwithin.com. Hanya saja penampilannya agaklah berbeda.

Langsung saja deh sobat Li-bi saya kasih tutorialnya.

1. Login di blogger sobat.
2. Masuk ke template dan edit HTML.
3. Centang "Expand Template Widget"
4. Copy syntax di bawah ini:

<!--Relate Post With Thumnail Start-->
<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/AVvXsEgJcHfs6lgUt714kChXN6zCi9agjKDHT1ipHwbjBO7KiFWtgeYtRpRitHyR0D5j21MUELyJcmKD1fO6FiZ1_vujJZeLn7eruKn_cn3VMFYXGQHdJC3btZWUK-ncQLZXiLuxuqKROB6olOo/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Relate Post With Thumbnail Start-->

5. Cari Kode </head> dan paste kode tersebut tepat di atas </head>.

6. Selanjutnya copy syntax di bawah ini:

<!-- Related Posts with Thumbnail 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>
<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:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnail Finish-->

7. Cari kode <data:post.body/> dan pastekan syntax tepat di bawahnya.
8. Simpan template dan menerapkan perubahan.

Catatan:
var maxresults=5;
Anda bisa menganti maxresults(jumlah post yang akan di tampilkan) sesuai keinginan anda.
var relatedpoststitle="Related Posts";
Untuk relate postnya anda bisa ganti dengan nama yang anda inginkan..

-LIBAS HABIS-