Cara Membuat Related Post dengan Thumbnail

S aya akan coba menjelaskannya sedetail mungkin agar anda bisa mengikutinya dengan mudah. Oke... langsung aja kita ke tahap-tahapnya : Untuk pertama seperti biasa, anda login ke Blogger > Rancangan > Edit HTML. Jangan lupa untuk mencentang "Expand Widget Templates" Kemudian cari code : </head>( gunakan ctrl+f) Pastekan kode dibawah ini tepat diatas nya :

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == "item"'> <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, “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; } </style> <script type='text/javascript'> var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script> <script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->


 Nah sekarang cari kode ini :
 <div class='post-footer-line post-footer-line-1'>
 Kalau ga ada kode di atas coba cari kode ini :
 <p class='post-footer-line post-footer-line-1'>

 Sekarang ganti salah satu kode di atas dengan kode ini :

<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End-->

Silahkan di lihat dulu, sudah jadi apa belum. Kalu jadi, sekarang tinggal mengeditnya. Secara default related post terdiri dari 5 postingan. Anda bisa merubahnya sesuai selera anda. Cari kode dibawah ini untuk mengedit jumlah related post anda :

var maxresults=5;

Jika ingin merubah kata "Related Post", anda bisa merubahnya di kode ini :

var relatedpoststitle="Related Posts";

Jika postingan anda tidak mempunyai gambar (thumbnails), tampilannya akan mengikuti defaultnya. Anda bisa merubahnya juga di bagian ini :

var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"; 

Nah sekarang postingan anda sudah dipercantik dengan related post yang profesional. Ini salah satu strategi agar anda tidak kehilangan pengunjung. Memberi kemudahan si pembaca untuk beralih ke postingan blog anda yang lain.

Sumber : Aelovebel.blogspot.com

Label :Tutorial