MEMBUAT RELATED POST BERJALAN

MEMBUAT ANIMASI RELATED POST BERJALAN SEPERTI SLIDE

Untuk posting kali ini saya akan menjelaskan bagaimana cara membuat menu related post seperti efek slide yang berjalan dari kiri  ke kanan...

berjalan dari kiri kekanan

Jadi efek yang nampak adalah akan seperti efek slide..

Kalau di platform Wordpress mungkin lebih gampang lagi karena sudah tersedia wordpress related post slider plugin. Sementara untuk blogspot kita masih harus membuatnya secara manual.

  

GIMANA CARA MEMBUATNYA...?

1. Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand widget 

    template.

2. Cari kode </head>  pada template anda.

3. Letakkan kode CSS/JS dibawah ini diatas kode </head> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

#related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}

#related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;}

#related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;}

#related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;}

.tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left}

.tooltip span.top{padding:20px 5px 0;background:url(http://4.bp.blogspot.com/-VdRo2rygD58/TsEfqdv2i_I/AAAAAAAAAHk/0XgrI8IM6TU/s1600/bt.png) no-repeat top;}

.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(http://4.bp.blogspot.com/-VdRo2rygD58/TsEfqdv2i_I/AAAAAAAAAHk/0XgrI8IM6TU/s1600/bt.png) no-repeat bottom;}

</style>

<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='http://4.bp.blogspot.com/-WQzi5hugHT8/TsEgEpZVEbI/AAAAAAAAAHs/Vq8oZLnRTVw/s1600/noimage.jpg';</script>

<script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script>

</b:if>

4.  Kemudian cari kode <div class='post-footer-line post-footer-line-1'> pada 

     template anda. 

Letakkan kode HTML dibawah ini dibawah kode <div class='post-footer-line post-footer-line-1'> Jika template anda kodenya ada 2, maka letakkan kode HTML dibawah kode <div class='post-footer-line post-footer-line-1'> yang pertama.

<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>Related Posts</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>

5.  Preview dulu untuk melihat tampilan hasilnya.

6. Jumlah maksimum posting yang ditayangkan adalah 20. Silahkan ganti angka 10 yang saya tandai 

    merah jika anda ingin merubahnya.

7.  Save/Simpan template anda.