Salah satu trik sederhana tapi cukup ampuh untuk meningkatkan pageview dan durasi kunjungan di blog adalah dengan menambahkan fitur Related Post (artikel terkait).
Biasanya widget ini muncul di bagian bawah artikel. Masalahnya, banyak pembaca yang males scroll sampai habis. Alhasil, artikel terkait yang sebenarnya bisa bikin mereka betah di blog kita jadi terlewat.
Nah, supaya lebih efektif, kita bisa memindahkan Related Post ke bagian tengah artikel. Dengan begitu, saat pembaca masih antusias membaca, mereka sudah ditawarkan artikel relevan lain. Strategi ini sangat cocok buat blog berita, tips, tutorial, hingga lifestyle.
Di bawah ini saya rangkum tutorial lengkap untuk menambahkan Related Post di tengah artikel Blogspot.
Kenapa Harus Related Post di Tengah Artikel?
Sebelum masuk ke teknis, pahami dulu manfaatnya:
-
Meningkatkan interaksi pembaca
Pembaca lebih mudah menemukan artikel relevan tanpa harus sampai akhir. -
Menambah jumlah pageview
Artikel yang diklik dari Related Post otomatis menaikkan jumlah tampilan halaman. -
SEO lebih sehat
Google suka blog dengan internal link yang rapi. Related Post membantu distribusi link internal. -
Mengurangi bounce rate
Pengunjung nggak langsung kabur setelah baca 1 artikel, tapi lanjut ke artikel lainnya.
Langkah-Langkah Menambahkan Related Post
Langkah 1: Masuk ke Pengaturan Template
- Login ke akun Blogger.
- Pilih menu Tema (Theme).
- Klik Edit HTML.
Langkah 2: Tambahkan Script di <head>
Cari tag </head> lalu tambahkan kode berikut sebelum tag tersebut:
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var bspostRelatedIn = new Array();
var bspostRelatedInNum = 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];
bspostRelatedIn[bspostRelatedInNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[bspostRelatedInNum] = entry.link[k].href;
bspostRelatedInNum++;
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] = bspostRelatedIn[i];
}
}
bspostRelatedIn = 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((bspostRelatedIn.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < bspostRelatedIn.length && i < 3) {
document.write('<li><a href="' + relatedUrls[r] + '">' + bspostRelatedIn[r] + '</a></li>');
if (r < bspostRelatedIn.length - 1) { r++; } else { r = 0; }
i++;
}
document.write('</ul>');
}
//]]>
</script>
</b:if>
👉 Ubah angka 3 pada i < 3 jika ingin menampilkan lebih banyak artikel.
Langkah 3: Edit Kode Artikel <data:post.body/>
Cari kode <data:post.body/>. Biasanya ada 2–3 kali muncul di template. Pilih bagian yang menampilkan isi utama artikel. Lalu ganti dengan kode ini:
<div expr:id='"post1" + data:post.id'/>
<div class='bspostRelatedIn'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<div id='bspostRelatedIn_title'>Artikel Terkait</div>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id'><p><data:post.body/></p></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf("<br>");
if(r>0) {
obj0.innerHTML=s.substr(0,r);
obj1.innerHTML=s.substr(r+4);
}
</script>
👉 Atur max-results=3 sesuai jumlah artikel terkait yang ingin ditampilkan.
Langkah 4: Tambahkan CSS Biar Rapi
Cari kode ]]></b:skin> lalu tambahkan CSS ini tepat sebelum kode tersebut:
/* Related Posts */
.bspostRelatedIn {
text-align: left;
padding: 15px;
margin: 30px 0;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 15px;
position: relative;
}
#bspostRelatedIn_title {
font-size: 16px;
margin: 0;
display: inline-block;
padding: 0 10px;
position: absolute;
top: -14px;
left: 10px;
background-color: #fefefe;
color: #7d7d7d;
}
.bspostRelatedIn ul {
list-style: none;
padding: 3px 22px 0;
}
.bspostRelatedIn li {
border-radius: 5px;
line-height: 1.7em;
margin-bottom: 0.433333em;
list-style: disc;
}
.bspostRelatedIn li:hover {
text-decoration: underline;
}
👉 Mau variasi tampilan? Ubah gaya list-nya:
- Model Bullet (lingkaran):
.bspostRelatedIn li { list-style: circle; }
- Model Nomor Urut:
.bspostRelatedIn li { list-style: decimal; }
Tips Tambahan
- Gunakan label yang konsisten di artikel supaya Related Post benar-benar relevan.
- Jangan tampilkan terlalu banyak artikel. Idealnya 3–5 saja agar tidak mengganggu fokus pembaca.
- Sesuaikan desain CSS dengan tema blog kamu biar terlihat natural.
Hasil Akhir
Setelah semua langkah selesai, simpan template lalu cek artikel kamu. Sekarang Related Post tampil manis di tengah artikel, bukan cuma di bawah.
Trik ini bukan hanya mempercantik tampilan blog, tapi juga bisa meningkatkan engagement, traffic, dan bikin pembaca lebih betah berlama-lama di blog kamu.
Selamat mencoba dan semoga sukses mengembangkan blog! 🚀
Mau saya bikinin juga versi artikel SEO dengan tambahan kata kunci “cara meningkatkan traffic blogspot” biar sekalian bisa naik di mesin pencari?