Related Posts with Thumbnails for Blogger

Haduh lama ga posting tutorial blog. Banyak yang sudah dibahas detail oleh sobat blogger lain soalnya. Tapi kali ini saya mencoba menggali kembali sedikit tentang tutorial blog untuk sobat yang mungkin belum tahu atau masih newbie seperti saya. Well, kali ini saya akan bahas membuat Related Posts with Thumbnails for Blogger. Maksudnya??? Maksudnya membuat posting yang saling berkaitan. Dulu saya pernah buat widget Related Posts Cantik juga. Tapi sekarang lebih unik lagi, Related Post dengan gambar. Oh iya, sekarang udah ada layanan gratis dari LinkWithin membuat Related Post diblogmu. Jadi yang pengen lebih cepet, simple and ga banyak mikir langsung ke layanan LinkWithin. Tapi kalau pengen belajar source blog lebih detail anda bisa mengoprek lewat tutorial ini.

Nih previewnya. Nah untuk demonya bisa anda lihat di Fresh Themes Gallery

Langsung aja tutorialnya :

Sebelumnya anda Expand Widget Template anda dahulu. Kemudian masukkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

#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;
}

Gimana sudah selesai belum??? Ok kita lanjut, Copy script dibawah ini kemudian paste dibawah kode ]]></b:skin>

<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>

Kemudian cari kode <div class='post-footer-line post-footer-line-1'> , atau kalo template anda memakai kode <p class='post-footer-line post-footer-line-1'> ini. Silahkan ditentukan sesuai template anda masing-masing. Nah kalau sudah ketemu kode tersebut, maka masukkan kode dibawah ini dan letakkan di bawah kode 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://ndyteens.blogspot.com/2009/09/related-posts-with-thumbnails-for.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.ndyteens.blogspot.com/' 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-->

Sedikit penjelasan dari kode diatas :

•  var maxresults=5; anda bisa mengganti berapa thumbnails widget yang anda inginkan
•  var relatedpoststitle="Related Posts"; anda bisa mengganti title Related Posts dengan misalnya : You might also like, atau yang lain sesuka anda

Semoga bisa mengoprek-oprek template anda :)

Posted by: Andi Setyoko

Berita Harian, Updated at: 5:02 AM