Related post Widget With Thumbnail

Sempat libur beberapa hari untuk menulis tentang trik di blog ini, ada yang berpendapat bahwa blog ini merubah 180 derajat isi-nya yang tadinya berisikan semua tentang trik menjadi free download dan cheats. Pendapat tersebut salah, sebelumnya saya minta maaf bukan maksud untuk merubah namun saya hanya menambahkan isi pada blog ini. Penambahan isi pada blog ini di faktori oleh teman saya yang meminta untuk mengisi tentang cheat dan free download, jadi saya tambahkan saja kategori tersebut kedalam blog saya. Ingat saya bukan merubah isi tapi hanya menambahkan!

Sekarang kita fokus ke judul postingan ini yaitu Membuat Related post Widget With Thumbnail. Mungkin hampir semua blogger yang isi blognya tentang trik blog pasti punya trik ini namun tidak ada salahnya dong kalau saya membahas ulang? Semua blogger mengetahui manfaat dari widget ini, yaitu untuk memudahkan pengunjung blog menjelajahi salah satu kategori blog. Langsung aja yuk ke cara pemasangannya.

1. Login ke blogger
2. masuk ke Rancangan >> Edit HTML
3. setelah itu klik kotak kecil di samping tulisan expand widget template
4. lalu cari kode post-footer-line post-footer-line-1 dan tambahkan kode di bawah ini tepat di bawahnya
   
   
   <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://amatulla83.blogspot.com' 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=&quot;Related Posts&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div style='clear:both'/> </b:if>
   
   
5. setelah itu cari kode lalu tambahkan kode </head> ini tepat di bawahnya
   
   
   <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://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/> </b:if>
   
6. Setelah semua langkah di atas di lakukan maka langkah terakhir simpan
7. selesai

kemudahan dalam penjelajahan isi dari blog anda adalah salah satu cara untuk meningkatkan trafik blog dan mendapatkan pengunjung setia. Mungkin hanya itu saja yang bisa saya sampaikan, kurang lebihnya mohon maaf. Terima kasih dan Happy Blogging.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg