Membuat Related Post dengan Gambar Berjalan Pada Blogger

Kira-kira bingung ga dengan maksud judul di atas? saya juga bingung gimana mau ngasih judulnya. 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 memperjelasnya.

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://gallerydunia.googlecode.com/files/relatedthumbs21.js.txt' 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>Lihat artikel terkait lainya</b></h3>
<div style='border-bottom: 1px dotted #94B1DF; clear: both; margin-bottom: 10px; padding: 0px 0px 10px 0px; width: 98%;'/>
<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=15;
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'>
</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>Lihat artikel terkait lainya</b></h3>
<div style='border-bottom: 1px dotted #94B1DF; clear: both; margin-bottom: 10px; padding: 0px 0px 10px 0px; width: 98%;'/>
<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'>
</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

Sekian post saya mengenai Membuat Related Post dengan Gambar Berjalan Pada Blogger.

Semoga bermanfaat..

» JANGAN LUPA LIKE N Komentarnya Yeach...