Related Post Thumbnail

Sudah pasang Related Post, kalau belum kebenaran deh mungkin Blog Tips kali ini bisa membantu rekan rekan BBM. Saya yakin banyak sudah yang membahas tutorial cara bikin Related Post, namun untuk yang ini rada beda. Kalau biasanya kan cuma di buat hanya berupa sebuah text, nah untuk yang ini dengan gambar thumbnail. Kemarin dah beberapa waktu saya coba mencari gimana caranya bikin Related Post, karena setelah ganti template ternyata cara yang lama tidak bisa saya adaptasi ke kode CSS template saya yang baru. Nah setelah beberapa kali error akhirnya bisa juga deh jadi bisa bikin Related Post.





Setelah selesai bikin Related Post, sambil nyatai blog walking deh ke tempat teman sambil cari informasi yang mungkin berguna untuk saya. Setelah sekian lama blog walking saya mampir ke tempate O-om dan ketemu posting terbaru yang membahas tentang cara buat Related Post dengan gambar. Setelah membaca tutorialnya saya putuskan untuk mencobanya dan wow keren hasilnya. Rekan bisa melihatnya di akhir postingan saya ini. Nah untuk rekan yang tertarik bisa mencobanya, dengan mengikuti tutorialnya.





Nah sekarang caranya ya :





Cara Pertama yang harus di tempuh adalah rekan masuk dulu ke menu Edit HTML, centang kotak kecil yang bertulis Expand Widget Template, dan kalau perlu download dulu template rekan biar aman.





Cara Kedua rekan cari kode </head>



Cara Ketiga, setelah ketemu kode yang saya maksud diatas, hapus kode tersebut dan ganti dengan kode berikut,



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

Cara Keempat, setelah rekan selesai mencopy paste kode tersebut, kemudian cari kode berikut,

<div class='post-footer-line post-footer-line-1'>

Namun karena kode masinh masing blog berbeda jika tidak menemukan kode di atas coba cari kode yang berikut,

<p class='post-footer-line post-footer-line-1'>

Setelah ketemu salah satu kode dari kode di atas, sekarang rekan bisa masukin kode berikut di bawah salah satu kode yang rekan temukan tadi,

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

Langkah terakhir, yang harus rekan tempuh adalah,

SAVE dan Lihat hasilnya.

Keterangan :

Untuk merubah berapa berapa related post yang mau rekan tampilkan, cari kode berikut untuk di edit,

var maxresults=5;

Untuk mengedit judul, cari kode berikut untuk mengedit,

var relatedpoststitle="Related Posts";

Ok rekan rekan selamat mencoba, dan salam sukses selalu urnuk anda.

Warm Regards,

Muklis Purwanto