Memasang Animasi Artikel Terkait pada Blog

Jika anda pernah berkunjung ke website-website yang berbau informasi, anda akan melihat tampilan artikel terkait bergambar. Tapi di sini akan saya bagikan bagaimana membuat artikel menarik tersebut di blog anda, apalagi artikel tersebut bisa berjalan. Contohnya bisa anda lihat di bawah postingan saya ini. Hehehe. Keren kan? Langsung saja ke TKP.

1. Login ke Blogger.
2. Pilih Rancangan.
3. Pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head> dengan menggunakan tombol pencari. <Ctrl-F>
6. Taruh paste kode di bawah ini di atas 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-->

7. Cari kode <div class=post-footer-line post-footer-line-1> atau kode sejenisnya.

8. Jika sudah ketemu, taruh kode ini di bawah <div class=post-footer-line post-footer-line-1>

<!-- Marquee Gotriogo 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://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 GotrioGo Related Posts with Thumbnails Code End-->

9. Yang kodenya tebal adalah jumlah tampilan artikel kita, terserah anda mau mengubahnya jadi berapa.

Setelah itu save template dan lihat hasilnya.



GOODLUCK