Related Post Animasi Untuk Blogger

Share :

Tweet

Alhamdulillah, akhirnya bisa ngepost lagi. Dari judulnya sudah ketahuan kan apa yang akan share pada hari ini?, nah betul sob saya hari ini aka share tentang Related Post Animasi Untuk Blogger. langsung saja kita ke screenshoot penggunaan dari Related Post Animasi yang saya share ini, kalo untuk live demonya bisa di lihat di bawah post ini.

Nah, tertarik tidak sob???, jika tertarik untuk memasang widget Related Post Animasi yang ada di blog saya ini ke blog sobat semua silahkan ikuti langkah-langkah di bawah ini.

• Login ke akun blogger sobat.
• Pergi ke Template >> Edit HTML >> Checklist Expand Template Widget 
• Cari kode </head>
• Copy paste script di bawah ini di atas kode </head>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<link href='https://sites.google.com/site/asparblog/home/css/rcent.css' rel='stylesheet' type='text/css'/>
</b:if>


• Masih di Edit HTML, cari kode  <b:includable id='comment_picker' var='post'>
• Diatas kode <b:includable id='comment_picker' var='post'> terdapat kode </b:includable>, copy paste script di bawah ini tepat di atas kode </b:includable>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>Related Post</h3>
<div class='Related' style='background:#fff'>
<script type='text/javascript'>
var defaultnoimage=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiivm3FHrWd_KXwnFOYVTSE1fcjwTpmdbMPzD0nVinIBnTglCAxLmJ9UreSwomIkIAJKbmZ7iz3Fn1TKXa73nPhyphenhyphenE8TKm8zHxAglTF_GMnZ3BDTNLzIxwmMk0bm6EDN_t2JgxRCRq6-RQI9//&#39;;
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/AVvXsEi-r-Ss3X10p2DnqvCuc3TDZlZDjVvIiTtl1YL0gpETvXEp4SfZr9B5ex1ePanqUxMLgE9CGqzBS8I7VLBxWlxRDORRm5Dta0S7fCgTzSqTL1Y9myi0gCAEXFQvUdbmdaLbygEuf0xsMqc/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 asparRlt = 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: '+asparRlt+'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>');

asparRlt = asparRlt + 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'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if>

• Yang terakhir klik Simpan Template

Mungkin itu saja yang bisa saya sampaikan dalam post yang berjudul Related Post Animasi Untuk Blogger, jika ada yang ingin ditanyakan bisa lewat komentar, terimakasih.....

Tag : Blogging