SIMPLE related posts ala ritongablog [BLOG]

Lagi dan lagi ternyata, hehehehe, sorry, tadi habis oprek blog dikit, niat mau buat related posts yang simple soalnya mau ganti yang bawaan template. Bagus sih cuma kurang greget tata letaknya, trus thumbnya itu loh kurang simetris.

Selancar lagi, tapi ga basah ya  keluar masuk blog yang ada, masih belum sreg, dan jalan terakhir ialah harus oprek dikit agar kesan simple yang diinginkan juga dapet. lebaay. 

OK langsung saja, wait, cara ini work di template blog saya, bagi ente yang g work, utak atik sedikit bagi yang paham, atau pasrahkan dan serahkan ke engkong google.

1. Masuk dashboard
2. Template 
3. Edit template

Trus carih nih code ]]></b:skin> , copy code di bawah ini dan PASTE code tepat diatasnya,

#related-posts{float:left;width:100%;margin:10px;padding:0 0 0}
#related-posts .widget h2,#related-posts h3{;background-color:#1E8BC3;font:20px Oswald;color:#fff;text-transform:none;margin:0 0 0;padding:0 0 0 12px;font-weight:500}
#related-posts a{color:#0973CF;font:14px Arial,Sans-serif;}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRTU4JvqLjp9qZ0T0S7zuQK3Dw3gd95crgQLkCluuSjevzNxtMcS3y3UCtlfyxtylmyGUwthQIyZm_SbAJOiNtX764w0Vw2uMKV5-k6CkcWFJzVRtW07x0qiT_3y5dRg5tmu1HhxDHAZ8/s1600/bullet-list.gif) no-repeat 0 11px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 7px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

nah terus cari kode </head>, copy kode di bawah ini, dan pastekan di atasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type='text/javascript'>
var relatedpoststitle=&quot;RELATED POSTS&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

Cari kode <div class='post-footer'> atau <data:post.body/> , paste kode di atasnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
<div class='clear'/>
<div style='clear: both;'/>
</b:if>

Save, n jadi deh, wait, ini work tepat seperti punya saya, tentunya dioprek dikit ga jauh dari aslinya karena selera aja. For demo lihat aja di related posts bawah..ok.Byeee!