Cara Membuat Related Post Dengan Gambar Berjalan

Cara Membuat Related Post Dengan Gambar Berjalan - Related post atau artikel terkait yang ada disebuah website atau blog berguna agar supaya sipembaca artikel bisa melihat dan membaca artikel terkait lainnya.

Biasanya Related Post atau artikel terkait ini termasuk kedalam katagori atau label yang ada di blog.

Cara Membuat Related Post Dengan Gambar Berjalan - Related post banyak macamnya ada yang memakai kotak tanpa ada gambar, ada juga yang berupa tulisan judul saja. Nah sekarang kita akan mencoba Membuat Related Post Dengan Gambar Berjalan, maksud disini adalah menampilkan Related Post dengan memakai gambar dan bergerak dari kanan kekiri. untuk lebih jelasnya silahkan anda peraktekan sendiri.

Nah jika anda ingin Membuat Related Post Dengan Gambar Berjalan, berikut adalah langkah langkahnya :

1. Login ke Blogger dengan menggunakan akun anda

2. Lalu masuk ke Rancangan

3. Lalu Edit HTML

4. Centang Expand Template Widget

5. Jangan lupa untuk mendownload dulu template anda. dan kalau ada kesalahan bisa dikembalikan kesemula

6. Kemudian cari kode </head> (untuk mempermudah pencarian silahkan tekan CTRL + F pada keyboard)

7. Copy kode dibawah ini dan letakan tepat diatas 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: #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://sundaboy.googlecode.com/files/relatet%20post.txt' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

8. Selanjutnya cari lagi kode yang mirip dengan kode dibawah ini

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

9. Lalu Copy dan pastekan kode dibawah ini tepat dibawah kode diatas

<!-- 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>Artikel Terkait</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=8;
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>
<!-- Related Posts with Thumbnails Code End-->

10. Simpan template dan lihat hasilnya

Catatan :

Tulisan yang berwarna "Artikel Terkait" yang berwarna merah diatas bisa anda ganti dengan kata-kata lain

Angka 8 merupakan jumlah artikel terkait yang akan ditampilkan, anda bisa merubahnya sesuai keinginan anda.

Nah itulah Cara Membuat Related Post Dengan Gambar Berjalan, semoga artikel ini dapat bermanfaat untuk anda.

Subscribe to receive free email updates: