Membuat Related Post Bergambar Dan Bergerak Update

Share On :

Tweet

Bagi Teman-teman Kantin Kampus 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 Anda. 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 Anda dapat menampilkan artikel blog Anda dengan jumlah banyak tanpa memakan tempat pada halaman blog yaitu dengan marquee atau berjalan.

Untuk membuatnya ikuti saja langkah-langkah berikut ini.

1.Silakan lihat cara membuat Thumbnail related posts disini (Cukup terapkan code CSSnya saja/ code yang pertama)

2.Setelah Anda menerapkan kode CSS yang pertama,silahkan cari kode berikut ini:

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

atau

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

3. Jika sudah ketemu salah satu code diatas, letakkan code dibawah ini setelah salah satu code diatas.

<!-- Marquee 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'>
</b:if>
</b:if>
<!-- Marquee Related Posts with Thumbnails Code End-->

4. Langkah terakhir Simpan Template kemudian lihat hasilnya.