Cara Membuat Related Post Thumbnails Bergerak

Recent Post adalah widget yang akan menampilkan beberapa artikel / postingan terakhir blog. Adapun jumlah portingan yang di tampilkan bisa diatur sesuai keinginan kita dengan mengacak - acak kode HTMLnya. Dengan Related Post Thmbnails 
ini, pengunjung akan dengan mudah melihat beberapa artikel terakhir
yang diposting di blog. Dengan sekali klik, pengunjung akan langsung
menuju ke artikel yang masih fresh. 

Mau tahu cara memasang Cara Membuat Related Post Thumbnails Bergerak dilengkapi dengan bingkai yang
tidak bisa digunakan untuk foto dinding di rumah pada blog anda ?
(Kalau kalimatnya terlalu panjang, silahkan ambil nafas dulu. Bernafas
melalui hidung... lalu keluarkan melalui bokong hehehehe......).

 

a. Login 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. Taruh (copy paste) kode berikut ini di atasnya

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- 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>
<!--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, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas
 

<!-- Marquee Serbablog 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://www.hajsmy.us/' style='display:none;'>Hajsmy Blog</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

h. save template

gimana sob, mudahkan, perlu ketelitian sob, jangan keburu-buru nanti malah kacau hasilnya, semoga bermanfaat ya sob :)