Cara baru membuat Related Post dengan tampilan gambar / thumbnail

Melalui tutorial berikut, anda bisa menampilkan jumlah gambar Related Post yang tak terbatas (sekitar 40 s/d 80). Apalagi hasil yang didapat menghadirkan tampilan yang cukup elegan, mengesankan dan manis untuk dilihat pada tatanan blog Anda. Warna baru dari related post berjenis ini, idenya berasal dari layanan yang diberikan oleh Linkwithin. Dan bila anda pernah menggunakannya? saya kira cukup familiar bila anda mau menggunakan tutorial berikut di bawah ini :

1. Seperti biasa, masuk dulu ke halaman Edit HTML dan berikan tanda centang pada kotak "Expand Widget Templates"

2. Cari kode ini </head>

3. Kemudian ganti dengan kode dibawah ini

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

4. Sekarang cari lagi kode dibawah

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

Jika tidak menemukan kode diatas, coba cari kode seperti ini

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

Kemudian taruh code berikut ini tepat di bawahnya

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

5. Setelah kode nomor 4 tersebut telah anda paste, jangan lupa disimpan dan lihat hasilnya

Untuk menampilkan berapa banyak jumlah related posts gambar yang ditampilkan, anda bisa dengan mengedit kode dibawah ini pada jumlah angkanya: var maxresults=5;

Kalau judul / title Related Posts kurang anda minati, silahkan menggantinya melalui pengeditan kode berikut di bawah ini var relatedpoststitle="Related Posts";

Selamat Mencoba aja :)