Membuat Artikel Terkait Disertai Thumbnails - Marquee (Berjalan)

Posted by adOeL Maret - 20 - undefined

Membuat Artikel Terkait Bergambar Berjalan
Sebenaranya denganjudul yang kayak diatas itu binggung gak? Ingin membuat tulisan yang terkait atau artikel terkait yang ada gambar (thumbnail). Jika yang biasanya hanya judul yang terkait dengan yang kita baca tapi kali ini kita akan membuat tulisan terkait dengan diseratai thumbnail yang ada di postingan yang terkait dengan tulisan (artikel) yang kita baca.
Pada postingan sebelumnya saya juga pernah membahas tentang cara Membuat Artikel Terkait - Disertai Thumbnails. Nah kali ini saya akan coba membahas cara Membuat Artikel Terkait Disertai Thumbnails - Marquee (Berjalan).

Artikel terkait yang disertai thumbnail (gambar kecil) tidak hanya diam, tetapi berjalan kesamping, menampilkan thumbnail disertai dengan judul tulisan (artikel). Thumbnail Related Posts (artikel terkait bergambar) ini akan menghemat banyak temaptdi blog kita, ya memang karena artikel terkait bergambarnya dibuat berjalan sehingga kita juga bisa membuat lebih banyak artikel terkait bergambar yang ditampilkan.

Cara Membuat Artikel Terkait Bergambar Berjalan

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
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://blogergadgets.googlecode.com/files/relatedthumbs21.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.

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

<h3><b>Related Posts</b></h3>  --> Judulnya adalah Related Posts

10. Simpan Template jika sudah selesai. 



Lihat juga artikel lainnya :)

Utta Melanikz

Post Author : Utta 'The Shelter'

Gue hanyalah seorang blogger pemula yang ingin belajar dan berbagi, Semua artikel bersumber dari pengalaman yang saya dapatkan dari dunia internet.Jika anda senang dengan Artikel ini, silahkan berlangganan gratis Via Email atau Feed Rss

Bagaimana Pendapat Anda??

Segera Laporkan apabila sobat menemukan Broken link (link rusak) atau ingin request dan bertanya, dengan meninggalkan pesan di bawah ini,dan Blog ini sudah DoFollow, namun tetap jaga kesopanan dengan tidak melakukan komentar spam yach.