Membuat Related Post Bergambar dan Bergerak

Kalau kemarin saya sudah menerangkan artikel terkait dengan fungsi scrolling, nah yang kali ini sedikit berbeda karena memanfaatkan cara membuat headline news yakni bergerak dari kanan ke kiri. fungsinyapun juga sama yakni menampilkan artikel yang sama kategori seperti postingan yang sedang di baca. tetapi, cara ini ada kelemahannya yakni membuat loading blog semakin berat karena menggunakan gambar atau thumbail serta begerak. namun karena hasilnya lebih bagus, efek loading blog sepertinya tidak ada masalah. oke lah kalau sudah tidak sabar membuatnya, silahkan ikuti tutorial di bawah ini   :

 

• Log in ke blogger.com dengan ID yang dimiliki
• Klik Rancangan pada dashboard menu
• Klik Edit HTML, jangan lupa memberi tanda centang pada "Expand Widget Templates"
• Selanjutnya cari kode berikut </head>
• Letakkan kode di bawah ini sebelum kode tersebut :

<!--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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

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

• sekarang cari kode berikut  : <div class='post-footer-line post-footer-line-1'>
• Kalo sudah ketemu, sobat tinggal masukan semua kode dibawah ini dibawah ini dan taruh diatas kode yang sobat temukan

<!-- 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=6&quot;' type='text/javascript'/></b:if></b:loop>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle="Related Posts";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

<!-- Related Posts with Thumbnails Code End-->

• Save template dan lihat hasilnya