Cara Membuat Releated Post Bergerak - Carousel Related Post

Selamat Sore sobat blogger,,kali ini saya ingin share  Cara Membuat Releated Post Bergerak - Carousel Related Post. Kalau pada postingan sebelumnya, saya share cara Cara MengCustom Releated Post dengan Linkwithin.

Keuntungan dari trik ini adalah sobat dapat menampilkan Releated artikel blog sobat dengan jumlah banyak tanpa memakan tempat pada halaman blog yaitu dengan marquee atau berjalan.untuk demonya klik tombol demo dibawah ini.

DEMO

Cara Membuat Releated Post Bergerak - Carousel Related Post : Cara nya sangat mudah sob, silahkan ikuti langkah sederhana berikut ini :

1. Seperti biasa, masuk ke bagian Edit HTML blogspot

2. Cari kode </head>

3. Letakkan kode dibawah ini sebelum 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3pGc1ouGGk3cguMn-VL1-_wF5VjOBelhoKQGlo3MjnGK88Anc4yg08i7YIk4OLMHg-9qH1JjkZsWVuuMM1PwKzCITQ41qKhTWR5SKL_wbJGTCZmj4Mwo3rWilYaFV92gbsPABuGCtiAA/s1600/bt.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3pGc1ouGGk3cguMn-VL1-_wF5VjOBelhoKQGlo3MjnGK88Anc4yg08i7YIk4OLMHg-9qH1JjkZsWVuuMM1PwKzCITQ41qKhTWR5SKL_wbJGTCZmj4Mwo3rWilYaFV92gbsPABuGCtiAA/s1600/bt.png) no-repeat bottom;}
</style>
<script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRqlckdaHjaC_IBBKHD8fiHfBYg0j9yfrEVr6o41Zwrca4bPRBt4T3qLoTE0crXmexNfYq5DAeFl0RJC9QBr5qg6ILUqqdyC0nwe9X1O8VTg26FgrBgGSJ6XDb_4Cm89gVyY7OHPAI0Mc/s1600/noimage.jpg';</script>
<script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script>
</b:if>

4. Cari kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'> 

5. Letakkan kode berikut di bawah 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=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>

6. Silahkan ganti tulisan yang berwarna merah sesuai keinginan sobat, Releated Post misal sobat ganti dengan kata you might also like atau baca juga yang ini.

7. Angka 10, silahkan ganti sesuai posting yang ingin sobat tampikan. Maksimal 20 ya.

8. Save dan Lihat Hasil nya.


Semoga Bemanfaat

Share this post