Related Post Dengan Thumbnails Untuk Blogger

Jumat, Oktober 16, 2009

Memasang Artikel Terkait atau biasa disebut dengan Related Post sangat berguna untuk memandu pembaca untuk menemukan artikel yang mempunyai kategori sama dengan yang sedang atau telah dibacanya. Bagi blogger, ini menguntungkan karena pengunjung akan betah berlama-lama di blognya, tentu jika artikel yang disajikan menarik. Pada posting kali ini saya akan mengulas bagaimana memasang related post dengan thumbnails untuk blogger yang dibuat oleh Aneesh.

Seperti namanya, related post dengan thumbnail akan menampilkan link ke posting anda yang mempunyai kategori sama disertai dengan gambar yang ada didalam artikel tersebut, jadi gambar akan muncul jika anda menyertakan gambar juga dalam posting anda.

Berikut adalah langkah-langkah untuk memasangnya :
1. Login ke akun blogger anda dan tuju Layout > Edit HTML dan pilih Expand Widget Template.

2. Cari kode berikut ini :

</head>

lalu ganti dengan kode tersebut dengan kode 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>

3. Sekarang cari kode ini :

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

Jika anda tidak menemukan kode diatas dalam template anda, coba cari kode ini :

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

Kemudian copy dan paste kode berikut ini dibawah kode tersebut diatas.

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

4. Anda bisa mengatur jumlah related post yag akan ditampilkan. Secara default akan ditampilkan 5 artikel yang terkait. Jika anda ingin mengubahnya, anda bisa mengedit kode berikut :

var maxresults=5;

5. Untuk memberi nama widget anda, silahkan edit pada baris berikut :

var relatedpoststitle="Related Posts";

6. Simpan.

Selamat mencoba