Cara Membuat Related Post Bergambar

Apakah anda pernah memasang widget related posts dari Linkwithin, bila anda melihat gambar disamping pasti sudah mengetahui related posts bergambar , 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 untuk membuat artikel berkait bergambar , beberapa kali blog saya dijadikan kelinci percobaan untuk merumuskan bagaimana cara yang tepat untuk membuat widget Related posts + thumbnails ( related post bergambar)  dan pada blog ini , saya akan berbagi tutorial seperti widget linkwithin secara manual

sekarang saya coba jelaskan bagaimana membuat artikel berkait 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 berikut 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: 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

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