Cara Membuat Related Posts di Bawah Posting Blog

RELATED Posts merupakan internal link dan navigasi menu blog yang biasa ada di bawah tiap posting blog.

Disarankan menggunakan widget related post berupa daftar judul saja, tanpa thumbnail image (gambar) dan ringkasan, agar Fast Loading.

Daftar judul posting, ada yang juga yang plus thumbnail image dan ringkasan, sangat baik untuk blog agar pengunjung tertarik membuka tulisan lainnya di blog kita.

Banyak sekali tips dan kode untuk membuat Related Posts. Namun, banyak pula blogger yang menyisipkan link ke dalamnya sebagai upaya mendapatkan backlink atau semacam credit link.

Berikut ini CB berbagi tip dan kode membuat Related Posts yang bebas dari sisipan atau injeksi link. CB ambil dan modif kode ini dari template karya Creating Website dan sudah dipasangkan di hampir semua template hasil modifikasi CB.

Tahapan Membuat Related Posts 

1. Klik "Template" > Klik "Edit HTML"
2. Temukan atau Cari (CTRL+F) kode ]]></b:skin>
3. Copy & Paste kode berikut ini di atas kode ]]></b:skin> tadi.

#related-posts{float:left;width:100%;border-top:2px 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:13px Arial}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgydERD8Jk3wqmskllnxPKkbzzBH3nN806_8WQzjNMDkNU_lS0ro97NN333ZMQbqlXqptHiNzOV6fiDy2pHUVwbkldalgxCPFoiPdV8U0Va9PDbRe79vdkiyOFBOdsSM2zW-SlVU1nCeZc/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. Temukan kode </head>
5. Copas kode berikut ini di atasnya:

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

NB: Tulisan "Related Posts" yang berwarna merah bisa Anda ganti dengan kata-kata lainnya, misalnya "Tulisan Terkait" atau "Posting Terkait".

6. Temukan kode <data:post.body/>
7. Copas kode berikut ini di bawahnya. Jika ditemukan lebih dari satu kode <data:post.body/>, maka pilih yang kedua atau yang ketiga (keep trying!).

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

Kini Related Posts sudah muncul di bawah setiap postingan blog Anda