Cara Membuat 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 di maksud 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 :

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

copy paste kode script 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://blogergadgets.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

copy paste kode ini:

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

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.

Jika artikel ini bermanfaat bagi anda. Mohon klik tombol dan tombol Like dibawah ini untuk mendukung blog ini dan sebagai ucapan terima kasih dari anda. terima kasih