Skip to main content

Cara Membuat "Baca Juga" Dalam Postingan Blog

Tulisan Ndeso, Cara membuat Related Post - Membuat artikel terkait atau lebih populernya related post pada blog memang bisa dianggap sebagai cara terbaik untuk menurunkan score bounce rates dari blog.

Bounce rate adalah persentase pengunjung dalam melihat artikel dalam blog kita kemudian pergi meninggalkannya tanpa melihat postingan lain.

Dapat kita artikan juga bahwa ketika ada pengunjung blog yang baru membaca satu artikel, kemudian akan pergi meninggalkan blog kita tanpa melihat artikel lain dalam blog kita.

Dengan adanya Related Post atau lebih dikenal Baca Juga, kita sengaja membuat pengunjung dipancing untuk tidak segera meninggalkan blog dengan cara menampilkan artikel yang terkait dengan artikel yang sedang mereka baca.

Maka dari itu, pada tulisan artikel kali ini akan membahas mengenai cara membuat related posts secara otomatis berdasarkan “tag”, related post ini letaknya berada di dalam postingan, bukan di akhir artikel.

Biasanya banyak juga yang menuliskan dengan kata “Baca Juga”.


Pasti anda juga sering melihat “Baca Juga” ini pada blog, seperti yang ada di blog ini juga.

Sebaiknya, sebelum anda memulai membuat related post ini, backup terlebih dahulu template anda guna menghindari hal-hal yang tidak diinginkan (seperti error misalnya), sehingga anda tetap memiliki data cadangan untuk digunakan kembali.

Baca Juga : Cara Membuat Sitemap Otomatis, Keren, dan SEO Friendly

Contohnya seperti dibawah ini :

Baca Juga JalanTikus

Cara Membuat "Baca Juga" Dalam Postingan Blog


Langkah pertama, letakkan kode dibawah ini diatas </head> atau &lt;/head&gt;

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

Setelah anda selesai dengan langkah diatas, selanjutnya adalah cari kode <data:post.body/> atau &lt;data:post.body/&gt;

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

Agar tampilannya lebih oke, sisipkan kode CSS berikut ini di atas kode </style> atau ]]></b:skin>

.post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}
.post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}
.post-terkait ul {margin:0;padding:0}
.post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}
.post-terkait ul li:last-child{border:none !important}
.post-terkait a {color:#1b71bc;font-size:13px !important}
.post-terkait a:hover {text-decoration:underline} 

Langkah terakhir adalah simpan template anda.

Baca Juga : Cara Membuat Pesan Penutup Otomatis Seperti Kompi Ajaib

Bagaimana? Cukup mudah bukan? Anda juga bisa membaca artikel lainnya mengenai cara membuat notifikasi pop up cookies untuk blog anda.

Semoga dengan anda memasang Related Post atau Baca Juga dalam postingan blog anda dapat menurunkan bounce rate dan pengunjung blog anda semakin betah yang dapat meningkatkan page views blog anda.

Selamat mencoba dan semoga bermanfaat :)
Cari Artikel Lainnya Di Sini
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar