Cara Pasang Related Post Thumbnails Berjalan

Pada postingan yang lalu saya pernah menjelaskan tentang Cara Membuat Related Posts Thumbnail " You Might Also Like" di blog.
Kali ini saya akan memberikan tips tentang RELATED POST THUMBNAIL BERJALAN.  Pada dasarnya widget ini hampir sama, tapi tips kali ini POS THUMBNAILNYA BEJALAN mondar-mandir seperti pada gambar di bawah ini:

 

Langsung Aja Sob,,,

a. Seperti biasa login dulu ke Blogger.
b. Di halaman Dasbor, kita pilih Rancangan.
c. Kemudian pilih Edit HTML
d. Beri tanda centang pada Expand Template Widget
e. Cari kode </head>
f. Copas kode berikut ini di atas 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-->

g. Cari kode di bawah ini

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

Atau jika tidak menemukannya cari kode berikut ini

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

h. Jika sudah ketemu, copas kode berikut ini di bawah salah satu kode di atas

<!-- Marquee Blogger Katro 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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://kep-katro.blogspot.com/2011/04/cara-membuat-related-post-tumbnail.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Blogger Katro Related Posts with Thumbnails Code End-->

h. save template

gimana sob,,, mudahkan? tapi sebelum anda memulainya, Download dulu template anda agar tak terjadi kesalahan fatal,,,...semoga berhasil, semoga sukses dan semoga yang terbaik ada pada sobat blogger sekalian.


NB: Jangan lupa tiggalkan jejak..........Thank's