Membuat Related Posts dengan Thumnails

Para Blogger bilang Related Posts penting. Saya setuju dengan argumen orang tersebut. Karena menurut saya semakin lengkap blog/web yang anda tayangkan, semakin menarik banyak pula perhatian para pengunjung. Oleh karena itulah saya disini membuat sebuah kumpulan Tips-Trik Blogger (karena saya hanya mengerti blogger), terutama tentang Related Posts. Anda dapat memilih salah satu dari berbagai macam Related Posts yang tersedia.
Kali ini untuk membuat Related Posts dengan Thumnails, yang harus dilakukan adalah:
1. Login ke Blogger

2. Klik rancangan, Edit HTML, centang kotak Expand Templates Widget

3. Kemudian cari kode </head> dan salin kode berikut diatas kode </head> tersebut.

<!--Related Posts with thumbnails Scripts and Styles Start--> <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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

4. Kemudian cari kode <p class='post-footer-line post-footer-line-1'> Jika tidak ketemu coba dengan kode <div class='post-footer-line post-footer-line-1'> lalu salin kode berikut sebelum kode yang kita cari sebelumnya

<!-- Related Posts with Thumbnails Code Start--> <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> <b:if cond='data:blog.pageType == "item"'> <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: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="<data:post.url/>"; 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-->

5. Simpan dan lihat hasilnya...

Selamat mencoba...
Jangan lupa mengganti:
var maxresults= 5 (jumlah posting terkait yang akan ditampilkan)
var relatedpoststitle="Related Posts" (sebagai judul pengganti posting terkait)


Terima kasih sudah berkunjung...
Happy Blogging ^^....

Sumber o-om.com