Cara Membuat Related Post (Baca Juga) Dalam Tengah Posting Blog

Membuat related posts atau artikel terkait pada blog memang dianggap sebagai cara terbaik untuk menurunkan score bounce rates dari blog. Karena pengunjung dipancing untuk tidak segera meninggalkan blog dengan cara menampilkan artikel yang terkait dengan artikel yang sedang dibaca.

Oleh karena itu, pada postingan kali ini saya akan membahas tentang cara membuat related posts secara otomatis berdasarkan “tag” tapi yang berada di dalam postingan, bukan di akhir artikel. Biasanya diawali dengan kata “Baca Juga”.

Seperti ini contohnya.

Sebaiknya backup terlebih dahulu template kamu untuk menghindari hal-hal yang tidak diinginkan sehingga kamu tetap memilikinya data cadangan Kalau sampai anda Salah Meempatkan kode.

Salin Kode Dibawah Ini dan Letakkan di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
  </b:if>

Langkah selanjutnya..

Cari kode <data:post.body/>

Baca Juga

• Cara Ampuh Mengatasi Wi-Fi yang Hidup Sendiri di Perangkat Xiaomi
• Cara Mudah Berhenti / Unreg Sms Berlangganan Penyedot Pulsa All Operator
• Cara Mudah Merubah Tampilan WhatsApp di iPhone
• Kelebihan dan Kekurangan Blog Menggunakan Template AMP
• Cara Ampuh Mengatasi Semua Error Structured Data: Image, Author, Updated, Publisher
• Cara Membuat / mengganti Tombol Next Page dan Older Post dengan Angka keren di Blog
• Apa Arti dan Pengertian Clickbait Penerapan dan Bahaya serta Resikonya
• Kenali Smartphone Label AU dan Docomo Japan Smartphone
• Inilah Pengertian dan Penjelasan Arti Sakinah Mawaddah Warahmah Lengkap

Biasanya anda akan menemukan 2 atau 3 Kode tersebut, Pastekan Ke nomor 2 klo belum berubah coba ke nomor 3,
Hapus kode tersebut dan ganti dengan kode berikut ini..

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='post-terkait'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
 

 Untuk mempercantik tampilan, sisipkan kode CSS berikut ini, dan letakkan di atas kode  ]]></b:skin>


 

/*Artikel Terkait Tengah Postingan rifanytop*/
.post-terkait{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
.post-terkait h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD font-size: 17px;}
.post-terkait ul{padding:7px;list-style:none}
.post-terkait ul{font-family:fontawesome;content:&quot;\f105&quot;;padding-right:10px}
.post-terkait li{border-radius:5px;border-bottom:1px solid rgbaundefined227,227,227,0.33);line-height:1.7em}

Jika sudah, simpan template..
Dan Lihat Hasilnya Selamat Mencoba dan semoga berhasil.