. Thumbnail Related Posts with Marquee (Berjalan) | Catatan Si Virgo Girl

 Subscribe in a reader

Berlangganan gratis Via Email Di bawah ini

Thursday, March 1, 2012

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

8 comments:

ini baru keren... saya mau simpan dulu ah... berbeda karena related post nya berjalan...

makasih infonya, n ilmunya

came here today!

kunjungan Variasi Blogger , waw keren sob Thumbnail Related Postsnya :D

asik juga ya.. bisa berganti ganti...

muanteff.. makasih Inpo nyaa

mas udah saya coba ko ngk berhasil ya ada 2 kode no4 yang diterapkan apa yang saya pakai ya,mohon bantuannya ya

postingan yang bagus,,,

 

My Followers

Page Like

Copyright© 2011 Catatan Si Virgo Girl | Template Blogger Designer by : Utta' |