Membuat Related Posts Dengan Thumbnail (gambar) Bergerak

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Membuat Artikel Terkait Thumbnails Disertai Marquee (Bergerak) yang bisa berjalan kesamping sehingga dapat menghemat tempat di blog kita. Selain itu pula artikel terkait yang ditampilkan bisa dimuat banyak.Contohnya bisa anda lihat Disini.

Cara Membuat Artikel Terkait Bergambar Berjalan
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya :

<!--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://galang.googlecode.com/files/relatedposts.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

7. Lalu cari kode di bawah ini :

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

-Atau jika tidak menemukannya cari kode berikut ini

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

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas (no.7)

<!-- 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://celoteh-galang.blogspot.com/2011/04/membuat-artikel-terkait-thumbnails.html' style='display:none;'>Thumbnail Related Post</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->

Keterangan
Kita juga dapat menganti beberapa kode css, seperti berikut ini:
var maxresults=10;   --> Berarti artikel terkait yang akan kita tampilkan adalah 10
Related Posts bisa anda rubah menjadi Artikel Terkait atau kata-kata yang anda inginkan

Selamat Mencoba !

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Creatif By : Unknown ~Amar Ma'ruf Nahi Munkar~

Anda sedang membaca artikel Membuat Related Posts Dengan Thumbnail (gambar) Bergerak. Yang ditulis oleh Unknown. Jika anda ingin sebarluaskan artikel ini, mohon sertakan sumber linknya. Kritik dan saran dapat anda sampaikan melalui kotak komentar. <a href="http://mtsalfalahcileles.blogspot.com/2012/01/membuat-related-posts-dengan-thumbnail_3.html" target="_blank">Membuat Related Posts Dengan Thumbnail (gambar) Bergerak</a>