Artikel Terkait #2 - Dengan Gambar Berjalan

Artikel Terkait #2 - Dengan Gambar Berjalan. Merupakan lanjutan dari artikel sebelumnya mengenai Cara Pasang Artikel Terkait (releated post) di Bawah postingan #1. Tentunya, jika anda sudah menerapkan cara sebelumnya, 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, saya pribadi lebih senang memakai trik blogging dengan menggunakan dua (2) halaman di bawah postingan saja.


Untuk membuat Thumbnail Related Posts Berjalan, silahkan ikuti beberapa cara dibawah ini :

1. Sekarang tuju Edit HTML.
2. Jangan lupa backup template anda dulu dengan mengklik Download Template Lengkap.
3. Klik Expand Template Widget.
4. Kemudian letakkan kode berikut ini,

tepat diatas kode </head>

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

5. Kemudian, setelah itu. Sekarang silakan cari code ini :

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

atau <p class='post-footer-line post-footer-line-1'>

6. Jika sudah ketemu salah satu dari kode diatas, letakkan kode dibawah ini setelah salah satu kode 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-->

7. Untuk menampilkan jumlah postingan atau artikel terkait berjalan yang muncul nantinya, anda bisa merubah kode yang berwarna biru sesuai kebutuhan anda. Atau juga bisa merubahnya melalui var maxresults=10;
8. Simpan dan lihat hasilnya.Untuk cara ini sudah saya pasang di blog Oneclickers.blogspot.com atau anda bisa coba melihat New product from Google Android Market webStore sebagai live demonya.