New Related Posts + Thumbnails (Alternatif Selain Linkwithin)

Sudah pernah memasang widget related posts dari layanan Linkwithin? kalo belum, paling tidak rekan pernah melihat widget ini ya. sebagai pola rekan dapat melihat pola widget tersebut di blog saya yang versi english disini dan disini. silahkan buka salah satu postingan saya, dan lihat sample widget tersebut pada final postingan.



Nah, Kali ini saya coba menyebarkan lagi tutorial alternarif pengganti layaknya widget Linkwithin, tampilannyapun sangat menyerupai sekali. Tapi yang ini agak berbeda, dan kita mesti repot sedikit alasannya semua dilakukan secara manual. Widget ini bergotong-royong sudah dibahas tuntas oleh pembuatnya Aneesh diblognya disini

Biar gak resah saya translate aja ya caranya disini:

1. Pertama, masuk dulu ke halaman Edit HTML, jangan lupa memberi tanda centang pada  "Expand Widget Templates"

2. Cari instruksi ini </head>

3. Kemudian ganti dengan instruksi 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 instruksi dibawah

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

Jika tidak menemukan instruksi diatas, coba cari instruksi menyerupai ini

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

Kalo sudah ketemu, tinggal masukan semua instruksi dibawah ini dibawah salah satu dari instruksi diatas yang rekan temukan.

<!-- 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=' /search?q=' 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="New Related Posts + Thumbnails (Alternatif selain LinkWithin)";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

5. jangan lupa disimpan dah lihat hasilnya

Untuk menampilkan berapa banyak jumlah related posts dapat dengan mengedit instruksi dibawah ini:

var maxresults=5;

Untuk mengganti title, kita dapat mengedit instruksi ini:

var relatedpoststitle="New Related Posts + Thumbnails (Alternatif selain LinkWithin)";

Selamat Mencoba aja :)