Home › Blogging

Cara Membuat Related Post Sederhana di Blogspot

Tema bawaan dari blogspot tidak mencantumkan related post atau artikel terkait. Agar bisa menampilkan list artikel terkait di blogspot, tentunya kiat harus menambahkan beberapa kode agar muncul artikel terkait. Fungsi dari related post agar pengunjung semakin betah serta bisa mengeksplorasi isi blog dengan mudah.

Cara Membuat Artikel Terkait Tanpa Tumbnail di Bawah Postingan Blog

1. Masuk ke Blogger > klik Tema > Edit HTML

2. Simpan kode CSS Related Post berikut ini tepat di atas kode </head>

<b:if cond='data:blog.pageType == "item"'>

<style type='text/css'>
#related-posts {margin: 15px 0px;}
#related-posts h2 {font-size:16px;font-weight: bold;color: #666;margin-bottom: 0.75em;}
#related-posts a {font-size: 14px;color: #333;border-bottom:1px dotted #E2E2E2;display:block;padding:5px 0;text-decoration: none;}
#related-posts a:hover {color: #48d;}
#related-posts ul {padding: 0px;list-style-type: none;}
#related-posts li {padding: 0;}
</style>
<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(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script>
</b:if>

3. Salin dan copy kode HTML/Javascript Related Post berikut ini di bawah kode <data:post.body/> atau di bawah <div class=’post-footer’>

<b:if cond='data:blog.pageType == "item"'><div id='related-posts'>

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

4. Save! Simpan template.

5. Buka blog atau refresh bila sudah membukanya.

Catatan:

Bila ingin menambah atau mengurangi jumlah postingan yang dimunculkan di Related Post, silakan ganti angka "5".
Semua postingan harus diberi label atau kategori agar bisa muncul per kategori.
Setiap langkah harus dilakukan dengan benar agar berhasil.

Belum ada tanggapan untuk "Cara Membuat Related Post Sederhana di Blogspot"

Post a Comment