Cara Membuat Artikle Terkait dengan Image Thumbnail Di Blogger 0

Menampilkan related post dengan image thumbnail(Artikle Terkait Dengan Image) di blogger, akan menambah blog anda lebih menarik dan terlihat lebih hidup sehingga dapat menarik pengunjung blog anda untuk membaca artikel yang berkaitan dengan artikel yang sedang dibacanya.mungkin ini sudah di bahas di banyak blog di dunia maya ini,tapi walaupun demikian mungkin tidak ada salahnya jika kali ini saya pun mencoba berbagi bagai mana cara menampilkan related post tersebut pada blog anda berada di bawah postingan.

Contoh :



Nah untuk cara pembuatanya ikuti langkah-langkah di bawah ini:

1. Log in ke blogger dashboard pilih layout kemudian pilih edit HTML dan check the "Expand Widget Templates" check box
2. Backup dulu templete anda untuk menghindari jika terjadi kesalahan
3. Cari Kode </head> dan letakan kode di bawah ini diatas kode tadi

#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, “Times New Roman”, 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; }


4. Cari kode ]]></b:skin> dan letakan kode di bawah ini di bawah kode tadi


<b:if cond='data:blog.pageType == &quot;item&quot;'> <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/> </b:if>


5.Langkan berikutnya cari kode

<data:post.body/>

kemudian letakan kode/script di bawah ini dibawah kode tadi

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

Keterangan :

I. Bagi anda yang memiliki templete dengan pasilitas read more maka akan ada dua kode

<data:post.body/>

dan letakan kode/script diatas setelah kode

<data:post.body/>

yang pertama

II. Anda bisa mengedit kode/script diatas  

var maxresults=5; ganti tulisan 5 untuk jumlah artikel terkait yang ingin di tampilkan  

var relatedpoststitle="Related Posts"; ganti tulisan Related Posts utuk merubah title

Sekian dulu artikel kali ini selamat mencoba dan semoga bermanfaaat...