Memasang Related Post + Thumbnail dari Linkwithin

Jika sobat blogger bosan dengan related post yang saya tulis kemarin, kali ini saya memberi alternatif lain tentang related post yang dilengkapi dengan image thumbnail. Widget related post ini merupakan layanan dari Linkwithin.

Cara memasangnya seperti ini:
1. Login --->>> Tata Letak --->>> Edit HTML.
2. Centang "Expand widgets template".
3. Cari kode </head> dan letakkan kode dibawah ini diatas kode </head>

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

5. Cari Kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>
6. Setelah itu letakkan kode dibawah ini dibawah kode tersebut (langkah no 5)

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

Untuk menampilkan berapa banyak jumlah related posts bisa dengan mengedit kode: var maxresults=5;

Untuk mengganti title, kita bisa mengedit kode ini: var relatedpoststitle="Related Posts";


Happy Blogging :)