TutorNesia ~ Sebenarnya sudah tidak asing lagi dengan tutorial yang satu ini, entah sudah berapa banyak dari master-master blogger men Share artiel ini. Namun apa salahnya jika saya membagikan kembali buat sahabat yang memerlukannya. Sebenarnya tutorial ini saya ambil dari blog www.aura-ilmu.com.
Bagaimana? tertarik untuk memasangnya?
Tambahkan kede CSS bawah ini tepat diatas ]]></b:skin> atau </style>.
#inikotak {width:100%;height:40px;background:#2c3e50;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);color:#fff;text-align:center;margin:0 auto;margin-top:20px;text-transform:uppercase;font:20px Oswald;border-radius:3px;line-height:40px;vertical-align: middle;position:relative;}
#inikotak::after {content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #2c3e50;border-right:20px solid transparent;width:0;height:0;line-height:0}
#artikel-terkait-leonyli a:hover,a:active{color:#2c3e50;text-decoration:underline;}
#artikel-terkait-leonyli ul {width:100%;margin-bottom: 20px; padding:0px;list-style:none; }
#artikel-terkait-leonyli ul li{float:left;height:144px;margin:0 20px 10px 0;width:137px;font: 12px Arial;}
#artikel-terkait-leonyli img{padding:6px;width:160px;height:90px;border-radius:4px;box-shadow: 0px 0px 3px 0px rgba(69,62,69,1);}
#artikel-terkait-leonyli img:hover{opacity:0.7;}
#artikel-terkait-leonyli ul li:nth-child(4n+4){margin-right:0;}Kode yang saya kasih warna biru itu adalah tinggi dan lebar gambar, sesuaikan dengan template anda.
Langkah selanjutnya cari kode <data:post.body/>, biasanya ada dua, cari pastekan kode di bawah ini tepat di bawah kode kedua <data:post.body/>, namun kita jangan hanya fokus pada kode <data:post.body/> saja, karena tiap template berbeda.
<!-- Artikel Terkait Leony Li Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='inikotak'>Baca Juga Artikel Terkait Lainnya</div>
<div id='artikel-terkait-leonyli'>
<script type='text/javascript'>//<![CDATA[
var ry='';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/AVvXsEhgPCjm1vHt5AU1iG8v2CmkEmLc4T1nYmUl66vyAG5-Rjk2lJp6joCOj7MmgygyCnB_qTh-6ldQ3RRpkvCmMMb5tOdrdBxjAsqihc-JO2TCCmiozXHRWkqRhqWk9IpBiqPWwXtSTszpCUeK/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/","/s200/")+'" title="'+titles[c]+'"/></a></div><a href="'+urls[c]+'" title="'+titles[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('artikel-terkait-leonyli').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;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>
<!-- Artikel Terkait Leony Li End -->Angka 200 yang saya kasih warna biru itu adalah ketajaman gambar, semakin tinggi nilai yang kita berikan maka semakin bagus pada gambar, namun saya sarankan nilai 200 sudah sangat bagus. Pada maxresults=8 adalah jumlah artikel yang mau kita tampilkan. angka 8 itu bisa anda ubah sesuai selera anda.
Jangan tanyakan lagi tentang berat atau tidak masalah loading, setiap element yang kita tambahkan pasti ada nampak dan meningkatkan berat loading terhadap blog. Semoga bermanfaat.
Baca Juga Artikel Terkait Lainnya
Silahkan bertanya sesuai dengan artikel yang telah anda baca diatas.
Link aktif otomatis terseleksi ke SPAMMER.
Alasan komentar anda tidak terjawab adalah OOT atau diluar kemampuan Admin.