Related posts atau artikel terkait dapat membantu pembaca menemukan tulisan lain yang masih berhubungan dengan artikel yang sedang mereka baca. Pada Blogger, fitur ini bisa dibuat berdasarkan label, sehingga artikel yang ditampilkan dapat disesuaikan dengan topik atau kategori yang digunakan pada blog.
Misalnya, sebuah blog memiliki artikel dengan label Blogger. Ketika pembaca membuka salah satu artikel tersebut, bagian related posts dapat menampilkan beberapa artikel lain yang juga menggunakan label Blogger. Dengan cara ini, navigasi antarartikel menjadi lebih terarah dan pembaca tidak harus kembali ke halaman utama untuk mencari tulisan berikutnya.
Pada artikel ini, kita akan membahas cara membuat related posts Blogger berdasarkan label menggunakan HTML, CSS inline, dan JavaScript. Cara ini dapat digunakan sebagai dasar untuk membuat widget artikel terkait tanpa harus menambahkan layanan eksternal.
Apa Itu Related Posts di Blogger?
Related posts Blogger adalah bagian pada halaman artikel yang menampilkan beberapa postingan lain yang dianggap memiliki hubungan dengan artikel yang sedang dibaca. Hubungan tersebut dapat ditentukan berdasarkan label yang digunakan pada postingan.
Dalam sistem sederhana berdasarkan label, JavaScript dapat membaca label pada halaman artikel kemudian mengambil postingan lain dari label tersebut. Setelah itu, daftar artikel terkait ditampilkan pada bagian tertentu di dalam halaman.
Konsep ini cukup berguna terutama untuk blog yang memiliki banyak artikel dalam beberapa topik. Pembaca dapat berpindah dari satu artikel ke artikel lain yang masih berada dalam pembahasan yang sama.
Mengapa Related Posts Berdasarkan Label Berguna?
Related post bukan sekadar elemen tambahan pada desain blog. Jika dibuat dengan struktur yang tepat, bagian artikel terkait dapat membantu pembaca melanjutkan pencarian informasi setelah menyelesaikan sebuah artikel.
- Memudahkan pembaca menemukan artikel dengan topik yang masih berhubungan.
- Membuat hubungan antarartikel menjadi lebih jelas.
- Membantu navigasi pada blog yang memiliki banyak artikel.
- Mengurangi kebutuhan pembaca untuk mencari artikel terkait secara manual.
- Memberikan tempat tambahan untuk menampilkan konten lama yang masih relevan.
Namun, related posts tidak otomatis membuat sebuah artikel mendapatkan peringkat lebih tinggi di mesin pencari. Fungsi utamanya adalah membantu pengalaman navigasi dan keterhubungan konten di dalam blog.
Bagaimana Related Post Berdasarkan Label Bekerja?
Sebelum memasang kodenya, penting memahami cara kerjanya terlebih dahulu. Related posts berdasarkan label pada dasarnya menggunakan beberapa informasi dari halaman artikel.
| Komponen | Fungsi |
|---|---|
| Label artikel | Menentukan topik yang digunakan sebagai dasar pencarian artikel terkait. |
| Feed Blogger | Menyediakan daftar postingan yang dapat dibaca oleh JavaScript. |
| JavaScript | Mengambil dan memproses data artikel terkait. |
| HTML | Menjadi tempat untuk menampilkan daftar artikel terkait. |
Dengan pendekatan tersebut, related posts dapat dibuat tanpa perlu menuliskan setiap judul artikel secara manual. Ketika artikel baru ditambahkan dengan label yang sesuai, artikel tersebut juga dapat menjadi kandidat untuk ditampilkan sebagai postingan terkait.
Persiapan Sebelum Membuat Related Posts Blogger
Sebelum memasukkan kode, ada beberapa hal yang sebaiknya diperiksa terlebih dahulu. Related posts akan bekerja lebih teratur apabila penggunaan label pada blog juga sudah konsisten.
1. Gunakan Label yang Konsisten
Hindari membuat terlalu banyak label yang sebenarnya memiliki arti sama. Contohnya, penggunaan label Blogger, Blogspot, dan Tutorial Blogspot untuk artikel dengan topik yang sangat mirip dapat membuat pengelompokan konten menjadi kurang konsisten.
2. Pastikan Artikel Memiliki Label
Related post berdasarkan label membutuhkan label sebagai dasar pengelompokan. Jika sebuah artikel tidak memiliki label yang sesuai, hasil artikel terkait dapat menjadi kurang relevan atau tidak muncul sesuai harapan.
3. Backup Template Terlebih Dahulu
Sebelum mengedit HTML Blogger, sebaiknya simpan salinan template terlebih dahulu. Langkah ini berguna apabila terjadi kesalahan penempatan kode atau ada bagian template yang tidak berjalan setelah perubahan.
Cara Membuat Related Posts di Blogger Berdasarkan Label
Berikut contoh pendekatan sederhana untuk membuat widget artikel terkait. Kode di bawah menggunakan elemen HTML sebagai wadah dan JavaScript untuk mengambil postingan dari label yang digunakan pada artikel.
Langkah 1: Backup Template Blogger
Masuk ke dashboard Blogger, kemudian buka bagian pengaturan tema atau template. Simpan salinan template yang sedang digunakan sebelum melakukan perubahan HTML.
Nama menu dan posisi pengaturan dapat berubah mengikuti pembaruan antarmuka Blogger, tetapi prinsipnya tetap sama: simpan template sebelum mengedit kode.
Langkah 2: Buat Wadah Related Posts
Tempatkan elemen berikut pada lokasi template tempat Anda ingin menampilkan artikel terkait.
<div id="related-posts-blogger">
<h2>Artikel Terkait</h2>
<div id="related-posts-list"></div>
</div>Elemen related-posts-list nantinya menjadi tempat JavaScript memasukkan daftar postingan terkait.
Langkah 3: Tambahkan JavaScript Related Posts
Berikut contoh JavaScript yang dapat digunakan sebagai dasar. Script ini membaca label artikel dari struktur label Blogger, kemudian mengambil feed dari label tersebut.
<script>
(function () {
var container = document.getElementById('related-posts-list');
if (!container) {
return;
}
var labels = document.querySelectorAll('a[href*="/search/label/"]');
if (!labels.length) {
return;
}
var labelUrl = labels[0].getAttribute('href');
if (!labelUrl) {
return;
}
var labelMatch = labelUrl.match(/\/search\/label\/([^?]+)/);
if (!labelMatch) {
return;
}
var label = decodeURIComponent(labelMatch[1]);
var feedUrl =
'/feeds/posts/default/-/' +
encodeURIComponent(label) +
'?alt=json-in-script&max-results=6&callback=showRelatedPosts';
var script = document.createElement('script');
script.src = feedUrl;
document.body.appendChild(script);
window.showRelatedPosts = function (data) {
var entries = data.feed.entry || [];
var currentUrl = window.location.href.split('?')[0];
var html = '';
entries.forEach(function (entry) {
var title = entry.title.$t;
var link = '';
entry.link.forEach(function (item) {
if (item.rel === 'alternate') {
link = item.href;
}
});
if (link && link.split('?')[0] !== currentUrl) {
html += '<div style="margin:0 0 14px;">';
html += '<a href="' + link + '" style="text-decoration:none;">';
html += title;
html += '</a>';
html += '</div>';
}
});
container.innerHTML = html;
};
})();
</script>Kode tersebut merupakan contoh dasar. Struktur label pada setiap template Blogger tidak selalu sama, sehingga bagian pemilihan label melalui selector a[href*="/search/label/"] mungkin perlu disesuaikan dengan HTML template yang digunakan.
Selain itu, pendekatan ini mengambil salah satu tautan label yang ditemukan pada halaman. Jika artikel memiliki beberapa label dan Anda ingin menentukan label tertentu sebagai dasar related posts, logikanya perlu dibuat lebih spesifik.
Langkah 4: Atur Jumlah Artikel yang Ditampilkan
Pada contoh di atas terdapat parameter max-results=6. Angka tersebut menentukan jumlah data postingan yang diminta dari feed.
Anda dapat mengubah jumlah tersebut sesuai kebutuhan. Namun, menampilkan terlalu banyak artikel sekaligus tidak selalu membuat navigasi menjadi lebih baik. Pilih jumlah yang cukup agar bagian artikel terkait tetap ringkas.
Cara Menampilkan Related Posts dalam Bentuk Grid
Jika ingin tampilan artikel terkait lebih visual, Anda dapat menggunakan CSS inline pada elemen yang dibuat oleh JavaScript. Salah satu pendekatan sederhana adalah menggunakan CSS Grid.
<div id="related-posts-list"
style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;">
</div>Untuk tampilan mobile, jumlah kolom sebaiknya dikurangi agar setiap artikel tetap mudah dibaca. Karena CSS inline tidak selalu cukup untuk membuat layout kompleks pada semua ukuran layar, Anda juga dapat menyesuaikan struktur template menggunakan media query jika memang diperlukan.
Jika tujuan utama Anda adalah membuat navigasi sederhana, daftar artikel terkait berbentuk teks sebenarnya sudah cukup. Tampilan grid lebih cocok jika template memang dirancang untuk menampilkan kartu artikel.
Bagaimana Memilih Artikel yang Relevan?
Related posts yang baik bukan hanya banyak, tetapi juga memiliki hubungan yang masuk akal dengan artikel utama. Penggunaan label menjadi penting karena label berfungsi sebagai salah satu cara untuk mengelompokkan konten.
| Artikel Utama | Label | Artikel Terkait |
|---|---|---|
| Cara Mengatur Permalink Blogger | Blogger | Cara Membuat Label Blogger, Cara Mengatur Template Blogger |
| Cara Membuat Menu Blogger | Blogger | Cara Membuat Label, Cara Membuat Daftar Isi Blogger |
| Cara Membuat Kotak Kode Blogger | Tutorial Blogger | Cara Menambahkan Tombol Copy Code di Blogger |
Contoh tersebut menunjukkan bahwa hubungan artikel tidak harus berdasarkan judul yang sama. Yang lebih penting adalah artikel tersebut masih berada dalam konteks pembahasan yang dibutuhkan pembaca.
Tips Membuat Related Posts Blogger Lebih Berguna
Gunakan Label yang Spesifik tetapi Tidak Berlebihan
Label sebaiknya cukup spesifik untuk membedakan topik, tetapi tidak perlu dibuat terlalu banyak. Struktur label yang sederhana akan memudahkan pengelompokan artikel dan pemeliharaan blog.
Tempatkan Related Posts Setelah Isi Artikel
Bagian artikel terkait sering kali lebih masuk akal ditempatkan setelah konten utama atau sebelum bagian penutup artikel. Pembaca dapat menyelesaikan informasi utama terlebih dahulu kemudian memilih artikel berikutnya.
Jangan Menampilkan Terlalu Banyak Artikel
Widget related posts tidak harus menampilkan puluhan artikel. Beberapa artikel yang relevan biasanya lebih mudah dipindai daripada daftar yang terlalu panjang.
Perhatikan Tampilan di Smartphone
Sebagian pembaca blog menggunakan perangkat mobile. Pastikan judul artikel terkait tidak terlalu panjang, tidak menyebabkan halaman melebar ke samping, dan tetap mudah disentuh apabila menggunakan kartu atau tombol.
Kesalahan yang Perlu Dihindari
- Menggunakan terlalu banyak label. Label yang berlebihan dapat membuat pengelompokan artikel menjadi tidak konsisten.
- Menampilkan artikel yang tidak relevan. Jangan mengejar jumlah artikel jika hubungan dengan artikel utama lemah.
- Tidak mengecualikan artikel yang sedang dibaca. Artikel utama sebaiknya tidak muncul sebagai rekomendasi untuk dirinya sendiri.
- Tidak melakukan pengujian setelah memasang script. Periksa halaman artikel, label, desktop, dan smartphone setelah kode diterapkan.
- Langsung mengedit template tanpa backup. Kesalahan kecil pada struktur XML atau penempatan kode dapat menyebabkan masalah pada template.
- Menganggap related posts sebagai solusi SEO tunggal. Keterhubungan artikel hanyalah salah satu bagian dari struktur dan pengalaman sebuah blog.
Checklist Related Posts Blogger
Sebelum menganggap widget artikel terkait selesai, gunakan checklist berikut untuk memeriksa hasilnya.
| Pemeriksaan | Status yang Diharapkan |
|---|---|
| Label artikel | Label sesuai dengan topik artikel. |
| Artikel terkait | Masih memiliki hubungan dengan artikel utama. |
| Artikel saat ini | Tidak ditampilkan sebagai rekomendasi dirinya sendiri. |
| Tampilan mobile | Tidak menyebabkan horizontal scrolling yang tidak diperlukan. |
| Link | Setiap judul mengarah ke artikel yang benar. |
| Template | Tidak mengalami error setelah kode ditambahkan. |
FAQ Related Posts Blogger
Apakah related posts Blogger harus menggunakan label?
Tidak harus. Related posts dapat dibuat dengan berbagai pendekatan, termasuk berdasarkan label, kategori, feed, atau logika tertentu yang dibuat melalui JavaScript. Label merupakan salah satu cara yang relatif mudah dipahami karena dapat digunakan sebagai pengelompokan topik artikel.
Berapa artikel yang sebaiknya ditampilkan?
Tidak ada jumlah yang berlaku untuk semua blog. Anda dapat memulai dengan beberapa artikel yang relevan dan kemudian melihat apakah tampilannya nyaman bagi pembaca. Jika bagian tersebut terlalu panjang, jumlah artikel dapat dikurangi.
Apakah related post dapat meningkatkan SEO Blogger?
Related posts dapat membantu struktur navigasi dan membuat artikel yang saling berhubungan lebih mudah ditemukan oleh pembaca. Namun, memasang widget related posts saja tidak menjamin peningkatan peringkat pencarian. Kualitas konten, relevansi, struktur situs, dan berbagai faktor lainnya tetap berperan.
Kenapa related posts tidak muncul?
Beberapa kemungkinan penyebabnya adalah artikel tidak memiliki label yang sesuai, selector pada JavaScript tidak cocok dengan struktur template, script ditempatkan pada lokasi yang tidak tepat, atau feed yang digunakan tidak menghasilkan data seperti yang diharapkan.
Apakah kode related posts bisa digunakan di semua template Blogger?
Tidak selalu langsung kompatibel. Setiap template dapat memiliki struktur HTML, class, dan cara menampilkan label yang berbeda. Karena itu, kode contoh perlu diuji dan mungkin perlu disesuaikan dengan struktur template yang digunakan.
Apakah artikel terkait harus memiliki label yang sama persis?
Jika metode yang digunakan memang mencari artikel melalui label tertentu, maka artikel kandidat harus berada pada label tersebut agar dapat ditemukan melalui metode itu. Karena itu, konsistensi penamaan label penting untuk hasil yang lebih teratur.
Kesimpulan
Membuat related posts di Blogger berdasarkan label dapat menjadi salah satu cara untuk memperbaiki navigasi dan membantu pembaca menemukan artikel lain yang masih berhubungan. Dengan menggunakan label sebagai dasar pengelompokan, artikel terkait dapat ditampilkan secara lebih terarah dibandingkan membuat daftar artikel secara manual.
Hal yang paling penting bukan hanya memasang widget, tetapi memastikan label blog digunakan secara konsisten dan artikel yang ditampilkan benar-benar relevan. Jangan lupa melakukan backup template sebelum mengedit HTML serta menguji hasilnya pada halaman artikel dan perangkat mobile.
Jika struktur label sudah rapi, related posts dapat menjadi bagian yang berguna dalam membangun hubungan antarartikel. Pembaca memiliki lebih banyak pilihan untuk melanjutkan membaca tanpa harus meninggalkan halaman artikel terlebih dahulu.