cara Membuat Related Posts dengan Thumbnail / You might also like di blogger

setelah mencari-cari artikelyang ( seperti pada blog ahdan ahmad ) berhubungan dengan artikel ini akhirnya saya berhasil menemukannya,awalnya sih, untuk mencari artikel ini cukup sulit apa lagi utk mencari kata kunci ahdan ahmad , ya mugkin saya tidak terlalu mahir mungkin setingkat sepertinkalian yang sama-sama ingin mempercantik blog kita, dengan kesungguhan saya akhirnya saya berhasil..... hore..! nah setelelah menemukanya akhirnya saya berinisiatif untuk mempostingkannya dan mepermudah bagi kalian.... ok langsung ajah ..

nih contoh gambarnya:

atau inign contoh lainnya lihat saja dibawah postingan ini:
lumayan bagus kan untuk mempercanik blog kita....yeah...!
mau,mau,mau,mau.....

caranya:

• Buka menu Design Edit HTML

• Beri centang pada Expand Widgets Templates

• Letakkan kode berikut diatas </head>

<!--Related Posts with thumbnails Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts { float:center; height:100%; min-height:100%; padding-top:10px; padding-left:15px; padding-right:15px; } #related-posts h2{ font-size: 1.3em; color: black; font-family: Arial; margin-bottom: 0.75em; } #related-posts a{ color:black; } #related-posts a:hover { background-color:#eeeeee; } </style> <script type='text/javascript'> var defaultnoimage="http://lh5.ggpht.com/_15FopxVONSo/TD3yhixJLoI/AAAAAAAADaY/gk-KFA5_m7w/noimage.png"; var maxresults=5; var splittercolor="#cccccc"; var relatedpoststitle="You might also like:"; </script> <script src='http://hermanblog.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails End-->

• Lalu cari <p class ='post-footer-line post-footer-line-1'/>

• Kalau tidak ketemu coba cari post-footer-line

• Letakkan kode berikut dibawahnya.

<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><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'/> <!-- remove --></b:if> <!-- Related Posts with Thumbnails Code End-->

• keterangan:

var splittercolor="#cccccc
untuk mengganti warna garis yang kamu sukai....
var relatedpoststitle="You might also like:"
gantilah yang bertulisan you might also dengan judul yang dinginkan
var maxresults=5
yang satu ini gantilah angka 5dengan jumlah postingan yang dinginkan..

nah.... kalau misalnya kode diatas mau dipakai.... ingat gunakan ctrlditambah f untuk mempermudah nya tapi setelah kode html yang diatas telah diterapkan..

wassalamualikum.wr.wb