Cara Membuat Widget Thumbnail Related Post With Marquee

Topik kali ini adalah Membuat Thumbnail Related Post With Marquee. Lihat gambar dibawah :

Keren bukan? Bagaimana cara membuatnya? Gampang kok. "Saya sudah pernah mencari di internet, dan sudah saya pasang di blogku tapi kode HTML broken atau rusak sehingga tidak bisa di pasang." Bagaimana cara memperbaikinya? Gampang kok. Kode HTML dibawah sudah saya perbaiki. Jadi, semuanya aman dan lancar. Baik langsung saja ke tujuan :

1. Login ke Blogger. Kemudian, ke Dashboard, click Layout, click Edit HTML


2. Click 'Expand Widget Templates'


3. Temukan kode HTML dibawah :

</head>

"kamu bisa memakai (Ctrl+F) untuk menemukan dengan mudah"

4. Taruh kode dibawah ini diatas kode </head> :

<!-- remove --><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'/>
<!-- remove --></b:if>

5. Temukan kode HTML di bawah : 

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

Jika tidak ketemu, mungkin template anda berbeda. Temukan kode ini : 

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

6. Taruh kode dibawah, setelah kode yang anda temukan diatas :

<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://tutorialwebforblogger.blogspot.com' style='display:none;'>Blogfuel</a>
</b:if>
</b:if>

7. Click Save Template and Selesai.