Tips Membuat Widget Carousel Related Post Scrolling

Share on :

Tweet

Membuat Widget Scrolling Related Post Di Blogspot  – Widget related post atau artikel terkait yang mau saya share kali ini sedikit berbeda dengan widget related post statis (diam) yang sering kita lihat seperti yang ada di blog Boem Bethem ini. 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 marquee dari thumbnail dan judul artikel sesuai label terkait dari posting yang ada. Dan apabila mouse kita sorotkan pada thumbnail atau judul (mouseover), maka secara otomatis akan memunculkan tulisan dari judul artikel. Jadi kalau kita melihat related post ini seperti layaknya kita melihat sebuah tayangan 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.

Screenshot Carousel Related Post

  

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/AVvXsEhXpQv3x5XNhdjDrlIFSG9H17Y5PLG8af-9IY6OZ_8lgCrUwdxXhh-J3Ab8gfJP5UdHvQxrWfYI4dvo30qzrtQ3wNlgGrRcij6FRPibeluBlnh6o58eCMPX1AbmHBat9JPiwlPXoKD4W-c/s1600/bt.png) no-repeat top;}

.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXpQv3x5XNhdjDrlIFSG9H17Y5PLG8af-9IY6OZ_8lgCrUwdxXhh-J3Ab8gfJP5UdHvQxrWfYI4dvo30qzrtQ3wNlgGrRcij6FRPibeluBlnh6o58eCMPX1AbmHBat9JPiwlPXoKD4W-c/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/AVvXsEiGFmq90y4u3O7DVWc5DZ06GDZFU4D4FtQrDO8VX1_ATFLwcNVmSI5dNsQiMO55ifFKn2NDOBeVANfzUqPv5Cwo5uK7l5us1kudPMTF_4uWN7rsZ5vkHmqCCvjNs2iFPeYMksuIVdzVNyQ/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.

Selamat mencoba  Membuat Scrolling Related Post / Carousel Related Post ini, semoga bisa mempercantik tampilan blog anda.