Thumbnail Related Posts dengan Marquee ( Gambar Berjalan)

di Jumat, Juni 18, 2010

Untuk teman-teman yang sudah memakai thumnail related post (artikel terkait bergambar) ini tettu akan lebih bagus kelihatannya dari pada related post dengan mengunakan teks saja. Selain mempunya thumnail atau gambar, related post ini mampu berjalan. Namun kekurangannya adalah yaitu memakan banyak tempat di halaman blog. Maka dari itu, kebanyakan blog yang ane kunjungi meminimalkan jumlah related post tersebut, apalagi dengan ukuran halaman posting yang sempit. Maka dari itu untuk memaksimalkannya yaitu dengan alternatif marquee(berjalan). Teman-teman bisa lihat related post yang ane pakai sekarang ini.

Untuk membuat Thumbnail Related Posts ini agar bisa ditampilkan dengan jumlah yang banyak yaitu dengan metode Marquee, silahkan ikuti beberapa cara dibawah ini :

Pertama, masuk dulu ke halaman Edit HTML, jangan lupa memberi tanda centang pada "Expand Widget Templates"
Cari kode ini
Kemudian ganti dengan kode dibawah 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>
Setelah sobat terapkan poin pertama diatas, sekarang silakan cari code ini :
<div class='post-footer-line post-footer-line-1'>
atau <p class='post-footer-line post-footer-line-1'>
Jika sudah ketemu salah satu code diatas, letakkan code dibawah ini setelah salah satu code diatas :
<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://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
Untuk menampilkan jumlah postingan, sobat bisa merubah code yang berwarna merah.
Simpan dan lihat hasilnya.