Membuat Widget Scrolling Related Post di Blog

Widget related post atau artikel terkait yang ingin saya share kali ini sedikit berbeda dengan widget related post statis (diam) yang sering kita lihat pada blog pada umumnya. Kali ini kita akan belajar membuat widget related post dengan fitur Carousel (Carousel Related Post). Keunikan widget related post ini ada pada scrolling dengan efek marque dari thumbnail dan judul artikel sesuai label terkait dari posting yang ada, Dan apabila mouse kita sorotkan pada thumbnail atau judul (mouseover).

Cara Membuat Carousel Related Post Di Blogspot

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwNa_L3A3G6Z_TqEujx0kDhMAGRW-D33CUzuOBmap_PTSYqietX5q-SXZCm98kJAi6TPAcpTsIE-BYcJVm6bAPMXIPHLxAL8OpSnkwz3eaiDlUPzazzgID8L6cAYehFbOtpYOCxYwAOlk/s1600/bt.png) no-repeat top;}
.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwNa_L3A3G6Z_TqEujx0kDhMAGRW-D33CUzuOBmap_PTSYqietX5q-SXZCm98kJAi6TPAcpTsIE-BYcJVm6bAPMXIPHLxAL8OpSnkwz3eaiDlUPzazzgID8L6cAYehFbOtpYOCxYwAOlk/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/AVvXsEjDRyHJ4DlD7qsN2SqE5kkFblS7fCM_vC2SLNKUCQPmO1wJIZ0GmqFILICC6scByxaaJuze0tMQKKA66RPWn4D3SO9yNMDPar3jCXnd27WWxnHUodZv7Zwxmkxv-1YHiyxW1msB-cvmKUY/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 warna ungu jika anda ingin merubahnya.
7. Save/Simpan template anda.

sumber: