Sebenaranya
denganjudul yang kayak diatas itu binggung gak? :D Ingin membuat
tulisan yang terkait atau artikel terkait yang ada gambar (thumbnail).
Jika yang biasanya hanya judul yang terkait dengan yang kita buka (baca)
tapi kali ini kita akan
membuat tulisan terkait dengan diseratai thumbnail yang ada di postingan yang terkait dengan tulisan (artikel) yang kita baca.
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
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 == "item"'>
<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, “Times New Roman”, 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. 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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" +
data:label.name +
"?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"'
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="<data:post.url/>";
var maxresults=
10;
var relatedpoststitle="";
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://kurniasepta.blogspot.com/2010/01/membuat-artikel-terkait-dengan-disertai.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-->
9. Kita juga dapat menganti beberapa kode css, seperti berikut ini
var maxresults=10;
Berarti artikel terkait yang akan kita tampilkan adalah 10
var relatedpoststitle="Thumbnail Related Post";
Judulnya adalah Thumbnail Related Post
