Cara Buat Related Post Bergerak Dan Berjalan

Bagi sobat yang sudah mencoba related post bergambar Atau Thumbnail tentu akan lebih tertarik lagi menggunakannya, karena tampilannya yang cukup menarik dengan adanya gambar (thumbnail) Sebagai Backroundnya. Kekurangan dari related post bergambar ini adalah related post ini terlalu memakan tempat pada halaman blog sobat. Sehingga kita tidak dapat menampilkan jumlah artikel secara maksimal. Nah ada salah satu cara untuk memaksimalkan related post ini ialah dengan alternatif marquee atau berjalan

Keuntungan dari trik ini adalah sobat dapat menampilkan artikel blog sobat dengan jumlah banyak tanpa memakan tempat pada halaman blog yaitu dengan marquee atau berjalan.

Untuk membuatnya ikuti saja langkah-langkah berikut ini.

1. Login ke blogger.com ID Mas Bos.

2. Klik Template » Edit HTML » Lanjutkan » Centang Kotak Expand Template Widget .

3. Masukkan kode HTML sebelum / diatasnya kode : </head>

Gunakan Ctrl + F untuk mempercepat pencarian dan meletakkan kode di bawah ini :

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

4. Silahkan cari kode berikut ini :

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

Atau

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

Atau

 <data:post.body/>

(jika sudah ada readmore, maka lebih dari 1 dan pilih yang terakhir untuk kode <data:post.body/>)

5. Jika sudah ketemu salah satu kode diatas, letakkan kode dibawah ini setelah / dibawah salah satu kode diatas :

<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=10&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'>
</b:if>
</b:if>

6. Langkah terakhir Simpan Template kemudian lihat hasilnya.

Keterangan : kode yang berwarna merah dapat diganti sesuai dengan yang sobat inginkan, Angka 10 menunjukkan jumlah artikel yang tampil pada related post, Related Posts (Silahkan ganti judul yang sobat inginkan).

Semoga artikel kali ini bermanfaat bagi sobat jangan lupa baca juga artikel-artikel menarik lainnya