Cara Membuat Baca Juga Otomatis di Postingan Blogger (Lengkap + Kode)

Saat kamu membaca artikel di blog, pasti pernah melihat bagian “Baca Juga” di tengah atau bawah postingan. Fitur ini dikenal juga sebagai related post atau artikel terkait, dan punya peran penting untuk meningkatkan jumlah tayangan halaman (pageview) dan membuat pengunjung betah berlama-lama di blog kamu.

Nah, di artikel ini saya akan membagikan cara membuat fitur Baca Juga secara otomatis di Blogger (Blogspot). Kamu nggak perlu menambahkan secara manual satu per satu, cukup pakai skrip dan sedikit pengaturan HTML dan CSS saja.

Kenapa Perlu Menambahkan “Baca Juga” di Blog?

Fitur Baca Juga bukan cuma hiasan. Ini dia beberapa manfaatnya:

• Meningkatkan pageview, karena pengunjung akan terdorong membaca artikel lain yang berkaitan.
• Memperkuat internal link, yang bagus untuk SEO blog kamu.
• Memberi pengalaman baca yang lebih nyaman karena pengunjung mudah menemukan topik serupa.

Namun sebelum kamu mengedit template blog, saya sarankan untuk membuat backup dulu. Ini penting banget supaya kalau nanti ada kesalahan, kamu bisa langsung mengembalikannya seperti semula tanpa harus panik.

Langkah-Langkah Menambahkan Baca Juga Otomatis di Blogger

Buka dashboard blogger > tema > edit html lalu salin kode javascript dibawah ini dan letakan diatas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[ var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}//]]>
</script></b:if>

Salin css dibawah ini dan letakan diatas kode ]]</b:skin> atau </style>

/* Related post by media903.com  */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Selanjutnya cari kode <data:post.body> lalu ganti dengan kode dibawah dan simpan.

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<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'><p><data:post.body/></p></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/2);
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>

Penutup

Itu dia cara mudah membuat fitur Baca Juga otomatis di Blogger. Dengan menambahkan fitur ini, kamu bisa membuat pembaca lebih lama berada di blog kamu, sekaligus membantu meningkatkan SEO on-page.

Kalau ada bagian yang kurang jelas atau kamu butuh bantuan lebih lanjut, jangan ragu tulis pertanyaan di kolom komentar ya. Dan jangan lupa baca juga artikel lain di blog ini — siapa tahu ada tips blogging lain yang kamu butuhkan.