 |
Pada artikel sebelumnya Cepot membagikan tutorial membuat artikel terkait di blogger yang muncul satu persatu di setiap paragraf artikel blogspot. Nah pada kesempatan kali ini Cepot membagikan tutorial memasang related post artikel terkait yang muncul sekaligus.
Dalam dunia blogging, menjaga pembaca tetap berada di blog Anda lebih lama adalah salah satu kunci utama keberhasilan. Salah satu cara efektif untuk mencapainya adalah dengan menampilkan "Artikel Terkait" atau "Related Posts" di akhir setiap postingan. Widget ini tidak hanya membuat blog Anda terlihat lebih profesional, tetapi juga membantu meningkatkan page views dan memperkuat struktur internal link yang bagus untuk SEO. Artikel ini akan membahas secara lengkap cara membuat widget related posts di Blogspot (Blogger) dengan pendekatan yang mudah, efektif, dan tentunya ramah SEO.
Apa Itu Widget Related Posts?
Widget related posts adalah elemen blog yang menampilkan artikel-artikel lain yang relevan atau berkaitan dengan artikel yang sedang dibaca pengunjung. Widget ini biasanya muncul di bagian bawah postingan blog dan disusun berdasarkan label, kategori, atau algoritma tertentu.
Tujuan utama dari widget ini adalah memberikan rekomendasi bacaan tambahan kepada pembaca berdasarkan minat atau topik yang serupa. Dengan begitu, pengunjung akan lebih terdorong untuk menjelajahi lebih banyak konten di blog Anda.
Mengapa Widget Ini Penting untuk SEO dan Pengalaman Pembaca?
Beberapa alasan mengapa widget related posts penting antara lain:
-
Meningkatkan Durasi Kunjungan: Dengan memberi pilihan bacaan lanjut, pembaca akan cenderung mengklik dan membaca artikel lain.
-
Memperkuat Internal Link: Struktur tautan internal menjadi lebih kuat, membantu mesin pencari memahami isi dan hubungan antar halaman.
-
Mengurangi Bounce Rate: Karena pembaca tidak langsung keluar dari blog setelah membaca satu artikel.
-
Menambah Nilai Estetika: Tampilan blog menjadi lebih informatif dan profesional.
Jika Anda sedang mencari cara menambahkan artikel terkait di Blogger atau widget baca juga Blogspot, maka artikel ini akan menjadi panduan lengkap untuk Anda.
Cara Kerja Related Posts di Blogspot
Di platform Blogspot, widget related posts biasanya bekerja dengan memanfaatkan label. Label adalah tag atau kategori yang digunakan untuk mengelompokkan artikel. Widget akan mencari artikel lain yang memiliki label yang sama, kemudian menampilkannya sebagai rekomendasi.
Dengan kata lain, jika artikel Anda memiliki label "Tips Blogging", maka related posts yang ditampilkan juga berasal dari artikel dengan label "Tips Blogging".
Widget ini dikenal juga sebagai related post otomatis Blogger, karena prosesnya berjalan secara dinamis tanpa perlu diatur manual untuk setiap artikel.
Langkah-Langkah Membuat Widget Artikel Terkait
Berikut ini panduan lengkap untuk menambahkan widget artikel serupa Blogspot ke blog Anda:
1. Tambahkan Script ke <head> Template
Masuk ke Dashboard Blogger Anda, lalu pilih menu Tema > Edit HTML. Cari tag <head>, lalu tambahkan kode berikut tepat di bawahnya:
<script type='text/javascript'>
//<![CDATA[
function showRelatedPosts(json) {
var relatedPosts = "";
var maxResults = 5; // jumlah artikel terkait
for (var i = 0; i < json.feed.entry.length && i < maxResults; i++) {
var entry = json.feed.entry[i];
var title = entry.title.$t;
var link = "";
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == "alternate") {
link = entry.link[j].href;
break;
}
}
relatedPosts += "<li><a href='" + link + "'>" + title + "</a></li>";
}
document.getElementById("related-posts").innerHTML = "<ul>" + relatedPosts + "</ul>";
}
//]]>
</script>
2. Sisipkan Kode di Template Postingan
Letakkan kode berikut di bawah <data:post.body/> di bagian single post template:
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<script src='/feeds/posts/default/-/<data:label.name/>?alt=json-in-script&callback=showRelatedPosts'></script>
<b:break/>
</b:loop>
<div id="related-posts">
<h4>Artikel Terkait:</h4>
<div>Memuat...</div>
</div>
</b:if>
3. Tambahkan CSS
Agar tampilannya lebih menarik, tambahkan CSS berikut di dalam tag <style> atau di bagian CSS tambahan Blogger:
<style>
#related-posts {
background: #f9f9f9;
padding: 15px;
margin-top: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
#related-posts h4 {
margin-top: 0;
font-size: 18px;
color: #333;
}
#related-posts ul {
list-style-type: disc;
padding-left: 20px;
}
#related-posts ul li {
margin: 5px 0;
}
#related-posts ul li a {
color: #2a7ae2;
text-decoration: none;
}
#related-posts ul li a:hover {
text-decoration: underline;
}
</style>
Penjelasan Detail Setiap Bagian Kode
-
Script JavaScript: Bertugas memproses data dari feed label dan menampilkannya sebagai daftar tautan.
-
Loop Label: Hanya mengambil satu label dari artikel untuk dijadikan dasar pencarian artikel terkait.
-
HTML Placeholder: Tempat di mana related posts akan dimuat.
-
CSS: Mengatur desain agar tampilannya bersih dan responsif.
Kustomisasi Tampilan
Jika Anda ingin tampilan related posts lebih modern atau menarik, Anda bisa menambahkan fitur seperti:
-
Menampilkan thumbnail/gambar kecil dari artikel.
-
Menggunakan tampilan grid alih-alih daftar.
-
Menambahkan efek hover atau animasi saat daftar muncul.
-
Menggunakan font custom atau ikon tambahan.
Anda juga bisa mencari referensi dari contoh script related posts dengan gambar untuk Blogspot agar tampilan lebih kaya visual.
Masalah Umum dan Cara Mengatasinya
-
Tidak Muncul: Pastikan artikel memiliki label dan feed diaktifkan.
-
Label Tidak Ditemukan: Gunakan label yang konsisten di semua artikel.
-
Tampilan Berantakan: Cek apakah CSS berhasil dimuat dengan benar.
-
Kena Limit Feed: Jika blog sudah memiliki banyak artikel, feed JSON mungkin dibatasi.
Tips Optimasi Related Posts untuk SEO
-
Gunakan Label yang Spesifik: Hindari label terlalu umum agar related posts benar-benar relevan.
-
Gunakan Internal Anchor Text yang Baik: Judul artikel menjadi anchor text internal link yang kuat.
-
Pastikan Kecepatan Load Tidak Terganggu: Jangan gunakan script berat atau loading lambat.
-
Gunakan Desain yang Responsif: Pastikan widget tampil baik di perangkat mobile.
-
Pilih Kata Kunci Relevan: Optimalkan dengan kata kunci seperti: cara menampilkan artikel terkait di Blogspot, related post dengan label di Blogger, dan kode HTML related posts untuk Blogspot.
Penutup
Menambahkan widget related posts di Blogspot adalah langkah sederhana namun sangat bermanfaat untuk meningkatkan kualitas blog Anda, baik dari segi SEO maupun pengalaman pembaca. Dengan mengikuti panduan di atas, Anda dapat membuat tampilan artikel terkait yang menarik, relevan, dan fungsional tanpa harus menggunakan plugin atau script pihak ketiga yang rumit.
Jika Anda seorang blogger pemula, panduan ini juga cocok untuk Anda yang sedang mencari tutorial Blogspot pemula. Semoga artikel ini membantu Anda memahami cara membuat related posts Blogspot secara menyeluruh dan mengoptimalkan potensi blog Anda untuk berkembang lebih cepat di mesin pencari seperti Google.
Selamat mencoba, dan jangan ragu untuk menyesuaikan desainnya agar sesuai dengan gaya blog Anda!
