Cara Membuat Artikel Terkait atau Related Post Fast Loading di Blog

Posting Terkait atau Related Post berguna untuk menampilkan artikel-artikel atau postingan terkait dengan artikel yang sedang dibaca pengunjung berdasarkan label. Hal ini memudahkan pengunjung untuk melihat artikel-artikel lainnya terkait dengan artikel yang bersangkutan.

Baca Juga : Cara Cepat Mencari Kode HTML atau CSS di Template Blog

Langkah-Langkah Membuat Related Post atau Artikel Terkait di Blog

1. Pada dasbord blog, klik "Tema" atau "Template"
2. Kemudian klik "Edit Tema"
3. Langkah selanjutnya, silahkan anda ikuti langkah di bawah sesuai dengan model Navigasi Halaman yang anda inginkan
4. Cari kode ini : ]]></b:skin>


5. Simpan kode berikut di atas kode  ]]></b:skin> 
   

   #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/AVvXsEhD14PakvhsexTTT_AW7vtSfS3eEfEj8MCvWRMFhkxBJqgHXXLT0IUrlpdIo4lPcgo0KUQ_9Pz5XiZg_9wrC9wT0DTm4n-bNCFpODdwMB1nV-NoKyQhcwJoraMPTfCEitwNreuJxhBT6xM/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}


6. Cari kode ini : ]]></head>


7. Simpan kode berikut 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;Catatan Terkait&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> 
   
   



Catatan :


• Angka 5 adalah banyaknya postingan yang akan ditampilkan, bisa dirubah sesuai keinginan
• Untuk tulisan yang diberi warna merah "Catatan Terkait" bisa diganti dengan keinginan misal supaya kelihatan lebih keren "Related Post" atau apa saja yang penting ada hubungannya.


8. Cari kode :
   • kode <data:post.body/> yang yang kedua atau ketiga atau
   • kode <div class='post-footer'> atau
   • kode <div class='post-footer-line post-footer-line-3'>



9. Simpan kode berikut :
   

   • di bawah kode <data:post.body/> yang yang kedua atau ketiga atau
   • di atas kode <div class='post-footer'> atau
   • di bawah kode <div class='post-footer-line post-footer-line-3'>

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

Catatan :


Penempatan kode tersebut tergantung dari template atau tema blog anda dan tergantung keinginan anda mau di mana ditempatkannya (Sesuaikan saja)


10. Langkah terakhir klik "Simpan Tema"

Sumber :