Membuat Related Post dengan gambar berjalan pada blogger

Kira-kira bingung ga dengan maksud judul di atas?saya juga bingung gimana mau ngasih judul nya..mungkin kalau mau di sederhakan bahasa nya kira-kira kayak gini :

"Membuat artikel terkait dalam bentuk gambar yang berjalan bolak- balik yang diletakan persis di bawah postingan"

Begitu lah maksud yang saya tuju untuk memperjelas nya silahkan anda klik contoh di salah satu blog saya di sini dan di sini dan gambar contoh nya kayak di bawah ini

Gimana sudah di lihat..??? nah jika sobat berminat mari kita belajar membuat nya...

1. Tahap PERTAMA

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) fokus pencarian pada huruf bercetak tebal

Cari Kode di bawah ini..

</head>

Jika sudah ketemu hapus dan ganti kode di bawah ini :

<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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>

</head>

2. Tahap KEDUA

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

CATATAN : jika di templete blog sobat tidak di temukan kode yang berwarna merah maka cari kode yang berwarna biru,yang penting salah satu nya aja yang di gunakan untuk modifikasi.

Sudah Ketemu...copypaste semua kode di bawah ini dan letakan di bawah kode <div class='post-footer-line post-footer-line-1'> jangan salah tempat ya.... di bawah

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' 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="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
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://kurniasepta.blogspot.com/2010/01/membuat-artikel-terkait-dengan-disertai.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>

Hasil nya kayak gini

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

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' 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="<data:post.url/>";

var maxresults=10;

var relatedpoststitle="";
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://kurniasepta.blogspot.com/2010/01/membuat-artikel-terkait-dengan-disertai.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>

CATATAN :

Kode yang saya cetak tebal berwarna biru ..var maxresults=10; maksud nya gambar thumnail yang di tampilkan bisa 10,11 atau jumlah lain nya yang sobat inginkan.

3.Tahap KETIGA simpan templete

Sekarang Coba anda lihat hasil nya...semoga berhasil..