Thumbnail Related Posts with Marquee (Berjalan)

Maaf ya rada lama posting’y coz gie sbuk2 ma kuliah, n ini bru kesempatan buat update posting yang di tanyain oleh salah satu sobat blogger, walapun saya masih newbie di bidang blogger, saya coba untuk membantu sobat blogger semampunya..

To the point aja yach...

Related posts memang menjadi salah satu alternatif sobat blogger buat menampilkan posting2 sebebelumnya tapi related posts tersebuat akan jauh lebih menarik jika di ikut sertakan dengan gambar untuk menarik perhatian pengunjung, tapi kadang kala related posts tersebut tidak bisa menampilkan seluruh posts kita sebelumnya, maka di perlukan marquee agar bisa menampilkan seluruh posts secara bergantia.

Seperti gambar di bawah ini :

 

Nah, untuk memulainya :

1.      Pertama, masuk dulu ke halaman Edit HTML, jangan lupa memberi tanda centang pada  "Expand Widget Templates".

2.      Cari kode ini </head>

3.       Kemudian ganti dengan kode dibawah ini

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

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

5.      Jika sudah ketemu salah satu code diatas, letakkan code dibawah ini setelah salah satu code diatas :

<!-- 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://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>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

6.      Simpan dan lihat hasilnya

Ket :

·         Untuk menampilkan jumlah postingan, sobat bisa merubah code yang berwarna biru.

·         Untuk mengganti title, sobat bisa merubah code yang berwarna ungu