Related Post Animasi Untuk Blogger atau Blogspot

Bismillahirrahmanirrahim,
Jika anda ingin membuat isi dari postingan blognya selalu dibaca oleh pengunjung atau membuat mereka merasa betah dengan blog anda. Saya akan membagikan salah satu wdiget yang akan menampilkan sebagian dari artikel atau postingan yang terkait atau juga lebih dikenal dengan Related Post untuk anda yang ingin mencobanya.

Perbedaan dari widget saya yang satu ini adalah dilengkapi animasi dengan menggunakan CSS3. Bagi saya dengan tambahan animasi seperti ini akan mudah menarik perhatian si pengunjung, atau mungkin penasaran untuk mencoba memilih salah satu link dari artikel anda.

Langkah Pemasangan Related Post

Pertama kali anda copy paste link CSS nya di dalam tag <head>

<link href='https://sites.google.com/site/adityameilaz/file-adityas-blog/snap.css' rel='stylesheet' type='text/css'/>

Temukan kode seperti di bawah ini.

<div class='post-footer-line post-footer-line-3'>
<!------------ Paste Kode di Area ini ------------>
</div>

Copy paste kode dibawah ini pada bagian yang sudah ditandai dari kode di atas.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>Related Post</h3>
<div class='adityasBlogRelated' style='background:#fff'>
<script type='text/javascript'>
 var defaultnoimage='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVu9EddNgldiFjrKa_3pJ3pCw5RW3wAExLtPMoV7pRxE3AaHbbp2pPTMeQMwRg4cI_-5GgQBifxWcVG5JsIg5iMX65a-rQodSXUYQx_MTkKfeVAVs6Zu3_2Ks2m9lFAW4AiLmTvqPmVGzz/';
 var maxresults=4;
</script>
<script type='text/javascript'>
//<![CDATA[
 var relatedTitles = new Array();
 var relatedTitlesNum = 0;
 var relatedUrls = new Array();
 var thumburl = new Array();
 function related_results_labels_thumbs(json) {
  for (var i = 0; i < json.feed.entry.length; i++) {
  var entry = json.feed.entry[i];
  relatedTitles[relatedTitlesNum] = entry.title.$t;
   try
    {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
   catch (error){
    s=entry.content.$t;
    a=s.indexOf("<img");
    b=s.indexOf("src=\"",a);
    c=s.indexOf("\"",b+5);
    d=s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
     thumburl[relatedTitlesNum]=d;
    }
    else {
     if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; 
     else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh21ezsexM5VBt5zMLXQtvGsry3hf_KCqK_PBj7X0nnsJOeB2TZJPFl1eBnOEsIlk7BIsBmS_353XYnAZeyHe0jZ-pebsk0of8UleuSCaFvMxvbsIDB7xQKwuvYK8_eW0YtGkz7u_MK5uo/s400/noimage.png";
    }
   }
   if(relatedTitles[relatedTitlesNum].length>44) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
   for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
     relatedUrls[relatedTitlesNum] = entry.link[k].href;
     relatedTitlesNum++;
    }
   }
  }
}

function removeRelatedDuplicates_thumbs() {
 var tmp = new Array(0);
 var tmp2 = new Array(0);
 var tmp3 = new Array(0);
 for(var i = 0; i < relatedUrls.length; i++) {
  if(!contains_thumbs(tmp, relatedUrls[i])){
   tmp.length += 1;
   tmp[tmp.length - 1] = relatedUrls[i];
   tmp2.length += 1;
   tmp3.length += 1;
   tmp2[tmp2.length - 1] = relatedTitles[i];
   tmp3[tmp3.length - 1] = thumburl[i];
  }
 }
 relatedTitles = tmp2;
 relatedUrls = tmp;
 thumburl=tmp3;
}

function contains_thumbs(a, e) {
 for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
 return false;
}

function printRelatedLabels_thumbs(current) {
 var splitbarcolor;
 if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#d4eaf2";
 for(var i = 0; i < relatedUrls.length; i++){
  if((relatedUrls[i]==current)||(!relatedTitles[i])){
   relatedUrls.splice(i,1);
   relatedTitles.splice(i,1);
   thumburl.splice(i,1);
   i--;
  }
 }
 var r = Math.floor((relatedTitles.length - 1) * Math.random());
 var i = 0;


var adityasBlogRlt = 25;
if(relatedTitles.length>0)
 document.write('<div id="content" class="items hfeed" style="margin-top: 12px;">');
 while (i < relatedTitles.length && i < 20 && i<maxresults) {
 if (thumburl[r].indexOf("/s72-c/") != -1) {
      thumburl[r] = thumburl[r].replace("/s72-c/", "/s200-c/")
    }
  document.write('<a href="'+ relatedUrls[r] +'" title="Baca : '+relatedTitles[r]+'"><div class="item hentry" style="left: '+adityasBlogRlt+'px; top: 0px; width: 125px; height: 118px; "><div class="card "><div class="front" style="background-image: url('+thumburl[r]+');"><div class="overlay"></div></div><div class="back"><div class="overlay"><div class="title entry-title">'+relatedTitles[r]+'</div><span class="bubble  comments-count "><span class="bubble-content">Baca</span><span class="bubble-tail"></span></span></div></div></div></div></a>');


adityasBlogRlt = adityasBlogRlt + 150;
i++;
  if (r < relatedTitles.length - 1) {
   r++;
  } 
  else {
   r = 0;
  }
 }
 document.write('</div>');
 relatedUrls.splice(0,relatedUrls.length);
 thumburl.splice(0,thumburl.length);
 relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>
        <b:loop values='data:post.labels' var='label'>
   <b:if cond='data:label.isLast != &quot;true&quot;'>
   </b:if>
   <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=6&quot;' type='text/javascript'></script>
        </b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if>

Lihat pada bagian yang sudah dihighlight.
Angka 25 dan 150 merupakan angka pengatur rata kiri setiap item.
Jadi anda bisa menyesuaikannya untuk jenis template anda.