Related Posts + Thumbnails (Related Posts Bergambar)

Related Posts + Thumbnails (Related Posts Bergambar) - Apakah anda pernah memasang related posts bergambar dari Linkwithin , bila anda melihat gambar dibawah pasti sudah mengetahui apa itu related posts , atau anda lihat di bawah posting ini di sebelah atas form komentar ada related posts yang bergambar , itulah yang dimaksud dengan artikel berkait bergambar ,sebenarnya ada cara yang cukup sederhana untuk membuat related posts seperti pada linkwithin

Setelah saya cari di google ada beberapa cara membuat Related Posts Bergambar , beberapa kali blog saya dijadikan kelinci percobaan untuk merumuskan bagaimana cara yang tepat untuk membuat  Related Posts + Thumbnails (related posts bergambar) dan pada blog ini , saya akan berbagi tutorial seperti widget linkwithin secara manual.

Buat Related Posts Bergambar

Sekarang saya coba jelaskan bagaimana membuat cara buat related posts bergambar :

  related posts gambar

1. seperti biasa masuk ke halaman Edit HTML, jangan lupa memberi tanda centang pada  "Expand Widget Templates" 
2. cari kode </head>

3.lalu simpan kode ini diatas kode tadi

<!--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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4.cari kode ini <div class='post-footer-line post-footer-line-1'> atau kode ini <p class='post-footer-line post-footer-line-1'> (karena setiap template berbeda" awalan nya untuk kode itu)

5. lalu simpan kode berikut ini di bawah salah satu kode diatas

<!-- 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>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

6.catatan : var maxresults=5; ganti angka 5 untuk jumlah yang akan ditampilkan
var relatedpoststitle="Related Posts"; ganti related posts untuk judul yang ingin anda tampilkan

7 save template

Selesai silahkan menikmati cara membuat Related Posts + Thumbnails (Related Posts Bergambar) bila anda menginginkan related post yang standar silahkan lihat posting Cara Membuat Related Post  pada Blogspot.