Cara Membuat Related Post Yang Paling Simple, dan Aman!

Related Post banyak dan berbagai macam bentuk, ada yang beserta dengan gambar ada juga yang bergerak dan ada juga sejajar ke kanan dan lain-lain. Sekarang yang saya postingkan kali ini adalah Related Post yang Simple dan Aman alias hanya dengan Teks dan Link saja. Fungsinya sama yaitu membuat artikel terkait. Jika anda mau seperti Related Post di atas, ikut langkah-langkah berikut ini:

NB: Silakan anda backup terlebih dahulu, misalkan Related Post ini tidak sesuai dengan keinginan anda, maka mudah untuk dikembalikan seperti semula!

CaraPertama:

1. Masuk ke Blogger anda.
2. Template -> Edit HTML
3. Copy - Paste kode berikut ini, tepat diatas kode ]]></b:skin> .

#related-posts{float:left;width:100%;border-bottom:0px solid #888;border-top:0px solid #88daed;margin:5px 0 10px;padding:15px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0}
#related-posts a{color:#0973CF;font:12px Verdana}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGhdSAuNv4_SbGeUBtOYCEAmD2oYYaQ_bb1hPC7mV2J4dtwdhvXX5_soEmeUDzf_H5sQEaPqOthuccPV53avxeH3Cj7lf-HbKH8Ox_g4uGL8Qq0gYX30X4AmRDVMn0bLr3mkvCxsXaA5U/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 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}

4. Jika sudah? Temukan kode </head>
5. Copy-Paste kode berikut ini, dan letak kan diatas kode </head>

<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>

6. Jika sudah, Temukan lagi kode <data:post.body/>
7. Copy-paste kode berikut ini, dan letak kan dibawah kode <data:post.body/> Kode ini biasanya lebih dari satu, silakan pilih yang kedua!

<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=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=6;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div><div class='clear'/>
</b:if>

8. Save Template!

Demikianlah Tutorial Blogger kali ini, Sekian Dari Saya. Terima kasih telah berkunjung, Semoga Bermanfaat!