MEMBUAT RELATED POST WITH THUMBNAIL BERGERAK

Related Post with thumbnail bergerak ini pada dasarnya adalah merupakan pengembangan dari tehnik membuat related post with thumbnail yang lalu serta pernah dibahas. Bergerak dalam hal ini kita tambahkan sebuah perintah efek marquee untuk membuat navigasi ini berjalan. Kelebihan tehnik ini, kita dapat menampilkan  related post (artikel terkait) dalam jumlah yang banyak dengan tetap menghemat tempat, atau sesuai dengan lebar kolom postingan blog.

 

Untuk cara membuatnya cukup mudah, kita tinggal merubah bagian yang kedua (<div class="post-footer-line> atau <post-footer-line-1">) saja. Artinya begini, setelah kita selesai menempatkan script yang pertama (lihat postingan ini), kemudian untuk script yang kedua (yang diletakkan di bawah kode <div class="post-footer-line>) dirubah menjadi seperti yang di bawah ini  :

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

Keterangan untuk kode yang berwarna merah adalah :

"Related Posts" dapat anda ganti sesuai dengan keinginan anda, semacam menjadi "Artikel Terkait" atau "You may like other article : " atau kata-kata lain.

"<marquee align=" ...........>" sampai dengan "</marquee>" adalah merupakan script efek berjalan.

"var maxresults=10" adalah merupakan jumlah artikel terkait yang akan ditampilkan.

Demikianlah cara membuat related post with thumbnail bergerak ini, semoga bermanfaat.