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

Tags

setelah mencari-cari artikelyang berhubungan dengan artikel ini akhirnya saya berhasil menemukannya,awalnya sih, untuk mencari artikel ini cukup sulit apa lagi utk mencari kata kunci, 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:
style xp
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

8 komentar

mantaf...
mampir juga..
http://internet-hijau.blogspot.com

download film gratis di http://downloadcinemamovie.blogspot.com/

numpang lewat

mantap bos postingannya, kalau sempat main ketempat ane ya gan.

main main ke blog gw gan
http://www.aurora-v.net/

tempat ane kok kagak bisa gan
http://ehacorner.com

nice info gan follow back yah ganhttp://rahmatdi99.blogspot.com

Nggk working gan, mampir juga http://ridhani-article.blogspot.com/

mampir gan www.kelincibersepeda.blogspot.com


EmoticonEmoticon