Cara Membuat Related Post List Simple Fast Loading

Cara Membuat Related Post List Simple, Mudah dan Fast Loading.

Related Post adalah daftar dari artikel atau tulisan yang masih satu label atau masih satu topik. Related post pada umumnya akan ditampilkan tepat di bawah postingan blog atau bisa juga sesuai dengan keinginan pemilik blog tersebut. Cara Membuat Related Post List Mudah.

Kegunaan atau fungsi dari related post adalah sebagai navigasi halaman yang berupa internal link dan juga berfungsi dalam meningkatkan pageviews blog tersebut.

Template blog pada umumnya sudah menyediakan related post, hanya saja terkadang mungkin bentuknya tidak sesuai keinginan atau tidak sesuai kebutuhan blog, contoh saja blog milik saya ini sebenarnya sudah terdapat related post yang menggunakan thumbnail dan judul. Sedangkan saya adalah blogger pemula yang masih dalam tahap belajar, agar blog lebih ringan maka saya menggunakan related post list yang lebih simple dan sederhana tentunya juga fast loading.

Untuk hasil dari related post list nanti hasilnya akan seperti foto di bawah ini.

Cara Membuat Related Post List Simple dan Fast Loading

Sebelum Anda mengubah atau mengganti related post, terlebih dahulu Anda download thema template Anda yang sekarang untuk mengantisipasi jika terjadi kesalahan.

1-Pertama-tama kita klik Tema  lalu Edit HTML

2-Selanjutnya copy paste kode berikut ini di atas kode ]]></b:skin> untuk beberapa template biasanya kode sudah di ubah menjadi <style>

#related-posts{float:left;width:100%;margin:10px;padding:1px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0;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/AVvXsEiG4eG0mX4mJAs_BOSHRMpGeE2Zm680W8OgH_h9CEutw_Dj7Nqom3uFAAMcLWj5fFD1PLwFybYWE58eKjwl9YcHM-IqqobyVxBmvlXbVenwhSSuKEf80TynX5PqD5SGIx4vyIJJJipOCuw/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}

2-Kemudian copy paste kode berikut ini di atas kode </head>

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

4-Kemudian copy paste kode berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga. Menurut pengalaman saya biasanya yang ke tiga, atau bisa juga sesuai dengan tempat keinginan Anda.

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

5-Dan yang terakhir adalah simpan template.

Untuk mengganti berapa jumlah Related Post yang ingin di tampilkan, Anda dapat mencari kode berikut ini lalu ganti angkanya. Terlihat jelas yah diatas yang berbeda warnanya di ganti jumlah angkannya sesuai dengan jumlah artikel terkait yang ingin anda tampilkan.

var numposts = 5;
var maxresults=5;

Perlu di ketahui, saya telah mengganti beberapa kali template blog saya ini dan saya coba kode di atas dan berhasil, mungkin untuk beberapa template tempatnya saja yang berubah. Anda juga bisa menghapus related post bawaan lalu hanya menggunakan related post yang baru ini tepat di bawah postingan, atau bisa juga menggunakan secara bersamaan, biasanya related post bawaan ada di bawah tombol share dan related post ini ada tepat di bawah postingan. Sesuaikan dengan kebutuhan Anda saja.

Sekian pembahasan mengenai Related Post List Fast Loading. Semoga ini bermanfaat untuk Anda.