Membuat Related Post Dengan Gambar Berjalan ~ Blog-E Andhy Irawan

Membuat Related Post Dengan Gambar Berjalan-> Mungkin bagi agan2 sekalian bingung kenapa related post bisa berjalan.!! yang saya maksudkan dengan berjalan disini adalah related post memilki gambar bisa bergeraka bolak-balik di footer blogpost kita, contohnya lihat di bawah postingan tiap artikel blog ini atau pada gambar dibawah ini:

sudah selesai mlototin gambarnya.?? dan bagaimana dah tau kan yang saya maksudkan dengan Membuat Related post Berjalan.?? kalo udah ngerti LET'S GO.. kita obrak-abrik Template Blog kita...

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, contreng, ceklist atau apalah namanya kotak kecil disudut kanan atas template blog anda yang bertuliskan Expand Template Widget
Kalau sudah kita mulai mengobok-ngobok kode html nya

CARI KODE DI BAWAH INI..!!! cara cepat nya tekan Ctrl + F pada keyboard lapie atau kompie anda:

"</head>"

Jika sudah ketemu, kopi dan paste kode dibawah ini diatas kode itu (</head>)
nih kodenya:


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


2. Masuk Tahap KEDUA
cari dan temukan kode dibawah ini, pilih salah satunya saja.

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

<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 kodenya.?? kalo dah ketemu kopi kode dibawah ini dan pastekan diatas salah satu kode tersebut.


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


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.
dan warna biru pada Related Post anda dapat mengubahnya sesuai dengan keinginan anda ( misalnya artikel terkait, you might also like, Dll)

sekian Tutorial ini, semoga bermanfaat:::

Posted in: Tutorial blogger