Membuat Related Post Dengan Gambar Berjalan Pada Blogger

Banyak sekali fitur untuk mempercantik dan membuat blog kita semakin cantik. Diantaranya adalah "membuat related Post dengan Gambar Berjalan"

Disini saya akan mencontohkannya pada blogger yang saya gunakan sekarang ini . Untuk memulainya silakan ikuti langkah - langkah dibawah ini :

• Seperti biasa anda login terlebih dahulu..kalau sudah login silahkan langsung ke RANCANGAN
• Anda klik Edit HTML
• Sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula.
• Jangan lupa di centang Expand Template Widget
• Kalau sudah kita mulai mengobok-ngobok kode html nya
  

CARI KODE DI BAWAH INI..!!! cara cepat nya tekan (Ctr + F pada keyboard)

</head>

 Jika sudah ketemu sisipkan kode dibawah ini diatas kode </head> yang nda cari pada angkah sebelumnya :

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

Selanjutnya cari code dibawah ini :

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

atau

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

Jika sudah ketemu copy dan paste kode dibawah ini tepat dibawah kode yang ada cari pada langkah sebeumnya

<!-- 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://bloggers-id.blogspot.com/2012/01/membuat-related-post-dengan-gambar.html' style='display:none;'>Related Post dengan gambar</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

Selanjutnya Simpan dan lihat hasilnya..

Good luck :-))