nGe Hank

Tips Membuat Widget Carousel Related Post Scrolling

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 Share With Irfan 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

  

<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/AVvXsEjfSUfKKW46m18dB9vZC9gQu4bwetymmmGLUFePddZ0zZSwIl2SA5jD4UK0OcN2TR6cTUa20rJCSmZQ03pMD1sAe7KhPIpovsc3DYYdbPDdIPw7tylwxNoRLUJcrkVzt9YASc0kozxcL0A/s1600/bt.png) no-repeat top;}

.tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfSUfKKW46m18dB9vZC9gQu4bwetymmmGLUFePddZ0zZSwIl2SA5jD4UK0OcN2TR6cTUa20rJCSmZQ03pMD1sAe7KhPIpovsc3DYYdbPDdIPw7tylwxNoRLUJcrkVzt9YASc0kozxcL0A/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/AVvXsEhSFXaLtmj-v3QTBTWvt3msQVlgXTkb_pHLrHOzG_NjfZ3A94e21Mn6H8QckjiaROnLH6QbIUzqpiY3oXiL30k8PfifSiWqXobIDBxJiVZTt1IZFN25GHTseur27dVQXMJu70_dbVki1AA/s1600/noimage.jpg;</script>

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

</b:if>

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

Diposting oleh Unknown di 10.15

Kirimkan Ini lewat EmailBlogThis!Bagikan ke XBerbagi ke FacebookBagikan ke Pinterest

Label: carousel, membuat, post, related, scrolling, tips, widget