nGe Hank

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>

Untuk membuat artikel terkait atau related posts syarat utamanya adalah postingan Sampeyan harus mempunyai label, karena penampilan otomatis artikel yang berkaitan didasarkan pada label yang sama.

• Login ke Blogger.
• Pilih Rancangan.
• Pilih Edit HTML
• Beri tanda centang pada Expand Template Widget.

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == alternate) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write(<ul>);
while (i < relatedTitles.length && i < 20) {
document.write(<li><a href=" + relatedUrls[r] + "> + relatedTitles[r] + </a></li>);
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write(</ul>);
}
//]]>
</script>
 

<b:if cond=data:post.labels>
  <data:postLabelsLabel/>
  <b:loop values=data:post.labels var=label>
  <a expr:href=data:label.url rel=tag><data:label.name/></a><b:if cond=data:label.isLast != &quot;true&quot;>,</b:if>
  </b:loop>
  </b:if>

<b:if cond=data:post.labels><data:postLabelsLabel/>
<b:loop values=data:post.labels var=label>
<a expr:href=data:label.url rel=tag><data:label.name/></a><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&amp;max-results=10&quot; type=text/javascript/>
</b:if>
</b:loop>
</b:if>

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>