Gambar di atas merupakan Preview Related Posts atau Artikel terkait untuk Blogspot, Artikel terkait atau Orang sering menyebutnya dengan Related Posts merupakan unsur penting dalam sebuah blog karena sebagai penerus sebuah Informasi terkait yang sedang mereka cari, sehingga mempunyai keuntungan yang sangat realistis bahwa seseorang yang sedang mencari sebuah Artikel apabila di suguhkan dengan Artikel yang hampir mirip atau sama maka akan tertarik untuk membukanya. Itulah mengapa Related Posts menurut saya adalah sebuah Elemen penting yang harus di pasang pada sebuah blog.
Mengurai dari judul diatas, bahwa menambahkan sebuah Widget Related Posts untuk orang awam maka akan terdengar sulit apalagi agar tampilan terlihat sedikit keren, atau menunjang performa blog kita tentunya harus mempunyai dasar dasar dalam Koding, namun demikian sekarang ini banyak sekali yang bisa membantu semua kebutuhan kita, apalagi dalam dunia maya, atau dalam hal ini adalah Bagaimana kita bisa membangun Blog kita agar terlihat rapih, elegant, dan Seo Friendly. Itulah unsur-unsur agar Blog kita bisa menjadi Inisiatif semua orang, dimana dia telah membangun blog mereka dengan berbagai macam upaya, sampai-sampai waktu mereka habiskan untuk sebuah blog. Baiklah semoga ini bisa membantu kalian semua yang sedang membutuhkan atau yang sedang mencari tentang Bagaimana Cara menambahkan atau Membuat widget Related Posts atau Artikel Terkait untuk Blogspot yang dilengkapi dengan Gambar.
1. Log In ke blog (Dashbord)
2. Edit Tema lalau Cari kode ]]></b:skin>
Setelah itu tambahkan Kode CSS di bawah ini Di atas kode ]]></b:skin>
/* RELATED POSTS
----------- */#Related-Posts {font-weight:bold; font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; font-size:12px;}
#Related-Posts h3{border-bottom: 1px dotted #696969; font-family: Arial; font-size: 20px; color: #696969; padding-bottom: 0px; text-transform: uppercase; font-weight: normal; text-align: center; height: 25px; margin-bottom: 10px; margin-top: 10px;}
#Related-Posts ul {width:580px; margin-bottom: 20px; padding:0px; list-style:none; display:inline;}
#Related-Posts li{float:left; display:inline; list-style:none; height:120px; margin:0 0px 10px 8px; width:120px;}
#Related-Posts ul li a{margin:0; line-height:18px;}
#Related-Posts img{padding:0; margin:0; width:100px; height:90px; border:1px solid #eaeaea;}
#Related-Posts img:hover{opacity:0.7;}
3. Selanjutnya Cari kode <data:post.body/> Kode ini biasanya ada 2 atau 3 namun carilah yang nomor 2 atau sesuaikan dengan Template anda. Jika sudah ketemu Copy kode di bawah ini, dan Paste di Bawah kode <data:post.body/> (lihat gambar dibawah)
<!-- Related Posts -->
<b:if cond='data:blog.pageType == "item"'>
<div id='Related-Posts'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3 class="RelatedPosts"><span>You Might Also Like</span></h3>';rn='<h3 class="RelatedPosts"><span>Jelajah Artikel Lainnya</span></h3>';rcomment='comments';rdisable='disable comments';commentYN='yes';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjab1Hekry5GvWj_yt8NN0GObs2yCzv784QAziouc6WKZM_h8TdbG6CrPrkeDi01T6X4UqEdcvaIvWRlRn_KRbYQLBn3gNI2Qxj3KUBpN5U_cg0fSVW3PYILpcazqSndkcwilUcK1vHtO08/s1600/no+image.jpg'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s150/")+'"/></a></div><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('Related-Posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=19"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=8;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div class='clear'/>
</b:if>
<!-- Related Posts -->
4. Klik SIMPAN TEMA (Lihat Hasilnya)
<!-- Related Posts -->
<b:if cond='data:blog.pageType == "item"'>
<div id='Related-Posts'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3 class="RelatedPosts"><span>You Might Also Like</span></h3>';rn='<h3 class="RelatedPosts"><span>Jelajah Artikel Lainnya</span></h3>';rcomment='comments';rdisable='disable comments';commentYN='yes';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjab1Hekry5GvWj_yt8NN0GObs2yCzv784QAziouc6WKZM_h8TdbG6CrPrkeDi01T6X4UqEdcvaIvWRlRn_KRbYQLBn3gNI2Qxj3KUBpN5U_cg0fSVW3PYILpcazqSndkcwilUcK1vHtO08/s1600/no+image.jpg'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><div class="pthumb"><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s150/")+'"/></a></div><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a><div class="clear"></div></li></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('Related-Posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=19"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=8;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
<div class='clear'/>
</b:if>
<!-- Related Posts -->
4. Klik SIMPAN TEMA (Lihat Hasilnya)
NB : Jika belum berhasil maka perlu untuk dicoba lagi yaitu pada Item No. 3 Kode yang ada pada template blog anda Jika telah di letakkan pada kode yang ke 2 namun belum bisa coba letakkan pada kode yang ke 3, Jika belum berhasil anda bisa mencari kode <div class='post-footer'> Setelah itu Paste kode tersebut di Atas kode <div class='post-footer'> (Selamat Mencoba, Semoga Berhasil)
Post a Comment