 |
Cara Menampilkan Related Post di Antara Paragraf Artikel Blogger
Menampilkan related post di dalam artikel adalah salah satu strategi terbaik untuk meningkatkan page views dan mengurangi bounce rate di blog. Dengan cara ini, pembaca akan lebih mudah menemukan artikel terkait tanpa harus mencarinya sendiri.
Di artikel ini, Cepot kita akan membahas cara menampilkan related post otomatis di antara paragraf artikel Blogger. Fitur ini akan membantu blog Anda terlihat lebih profesional dan menarik perhatian pembaca untuk tetap menjelajahi konten lain yang relevan.
Kamu bisa mengikuti tutorial Cepot cara memasang artikel terkait di tengah artikel blogspot dengan mudah dan cepat. Bahkan kamu hanya cukup menguasai blogger anda sendiri untuk membuat related post di blogspot.
Meski banyak blogger yang bagiin tutorial menampilkan artikel terkait di tengah artikel blogger. Namun Cepot optimis sobat Cepot tetep bisa menemukan artikel Cepot ini di google.
Karena artikel yang Cepot bagikan mengenai membuat related post di blogspot ini sedikit berbeda. Perbedaan daftar isi baca juga ( related post) yang Cepot bagiin dengan blogger lainya yaitu.
1. Kode javascript yang di pasang gak seribet tutorial blogger lain 🤣.
2. Multi related post di blogspot milik Cepot bisa muncul satu persatu di setiap paragraf artikel blogger kamu.
Sudah siap belum sobat Cepot untuk mengikuti arahan yang akan Cepot kasih untuk membuat multi related post di tengah artikel blogger.
Kalau sudah yuk simak baik" isi artikel Cepot ini ya 🤣.
Kenapa Related Post di Dalam Artikel Itu Penting?
Sebelum masuk ke tutorial, mari kita pahami dulu mengapa related post di dalam artikel sangat bermanfaat:
- Meningkatkan Page Views – Dengan menampilkan artikel terkait, peluang pembaca untuk mengklik dan membaca artikel lain semakin besar.
- Mengurangi Bounce Rate – Jika pengunjung menemukan artikel lain yang menarik, mereka akan bertahan lebih lama di blog Anda.
- SEO Friendly – Internal linking yang relevan dapat membantu meningkatkan peringkat halaman di mesin pencari.
- Meningkatkan Engagement – Pembaca akan lebih aktif mengeksplorasi konten lain yang memiliki topik serupa.
- Navigasi Lebih Mudah – Daripada hanya menampilkan related post di akhir artikel, menyisipkannya di dalam paragraf membuat pembaca lebih tertarik untuk mengekliknya.
Cara Menampilkan Related Post di Dalam Artikel Blogger/Blogspot
1. Tambahkan CSS untuk Styling Related Post Blogger
Agar tampilan related post terlihat menarik, kita perlu menambahkan beberapa kode CSS ke dalam template Blogger.
Langkah-langkah:
- Masuk ke Blogger > Tema > Edit HTML.
- Cari kode
</head>. - Tambahkan CSS berikut di atas kode
</head>:
.related-post-inline {
background: #f9f9f9;
border-left: 4px solid #007bff;
padding: 10px;
margin: 20px 0;
font-size: 14px;
}
.related-post-inline a {
color: #007bff;
text-decoration: none;
font-weight: bold;
}
.related-post-inline a:hover {
text-decoration: underline;
}
Penjelasan kode CSS:
.related-post-inline→ Mengatur tampilan kotak related post dengan warna latar belakang abu-abu.- Border kiri biru → Memberikan efek visual agar terlihat lebih menarik.
- Teks lebih kecil dan padding yang rapi → Agar related post tetap enak dibaca dan tidak mengganggu isi artikel.
2. Tambahkan Kode JavaScript untuk Memanggil Related Post Blogspot
Setelah menambahkan CSS, kini kita perlu menambahkan kode JavaScript agar sistem bisa mengambil artikel terkait berdasarkan label yang sama.
Langkah-langkah:
- Masih di menu Tema Blogger.
- Cari kode
</body>. - Tempelkan kode JavaScript berikut sebelum
</body>:
<script>
document.addEventListener("DOMContentLoaded", function () {
let paragraphs = document.querySelectorAll('.post-body p');
let relatedPosts = [];
let numParagraphs = paragraphs.length;
let insertEvery = 3; // Sisipkan setiap 3 paragraf
function getRelatedPosts(callback) {
let label = document.querySelector('.post-labels a');
if (!label) return;
let labelName = label.innerText;
let blogURL = window.location.origin;
let feedURL = `${blogURL}/feeds/posts/default/-/${labelName}?alt=json&max-results=5`;
fetch(feedURL)
.then(response => response.json())
.then(data => {
let entries = data.feed.entry;
if (!entries) return;
entries.forEach(entry => {
let title = entry.title.$t;
let link = entry.link.find(l => l.rel === "alternate").href;
relatedPosts.push({ title, link });
});
callback();
})
.catch(err => console.error("Error fetching related posts:", err));
}
function insertRelatedPosts() {
if (relatedPosts.length === 0) return;
let insertCount = 0;
for (let i = insertEvery - 1; i < numParagraphs; i += insertEvery + 1) {
if (insertCount >= relatedPosts.length) break;
let div = document.createElement("div");
div.className = "related-post-inline";
div.innerHTML = `<strong>Related Post:</strong> <a href="${relatedPosts[insertCount].link}" target="_blank">${relatedPosts[insertCount].title}</a>`;
if (paragraphs[i]) {
paragraphs[i].parentNode.insertBefore(div, paragraphs[i].nextSibling);
insertCount++;
}
}
}
getRelatedPosts(insertRelatedPosts);
});
</script>
3. Cara Kerja Kode Related Post Di Artikel Blogspot
Kode ini bekerja dengan mengambil artikel terkait berdasarkan label yang sama dan menyisipkannya setiap 3 paragraf.
✅ Mengambil label artikel
✅ Mencari artikel terkait di feed Blogger
✅ Menyisipkan related post di antara paragraf
Jika suatu artikel memiliki 10 paragraf, maka related post akan muncul setelah paragraf ke-3, ke-6, dan ke-9.
Keuntungan Menggunakan Kode Related Post Punya Cepot Ini
- Otomatis – Tidak perlu memasukkan related post secara manual.
- Mudah Disesuaikan – Anda bisa mengubah jumlah paragraf sebelum related post muncul.
- Tanpa jQuery – Menggunakan JavaScript murni, sehingga lebih ringan.
- SEO Friendly – Membantu meningkatkan internal linking.
- Desain Menarik – Related post memiliki tampilan yang bersih dan profesional.
Tips Optimasi Related Post di Blogger Ala Blog Cepot
Agar hasilnya lebih maksimal, berikut beberapa tips tambahan:
1. Gunakan Label Artikel yang Relevan
Pastikan setiap artikel memiliki label yang sesuai, karena related post akan ditampilkan berdasarkan kesamaan label.
✅ Benar:
- Label: Tutorial Blogger → Artikel terkait akan muncul dari kategori yang sama.
❌ Salah:
- Label: Artikel1, Artikel2 → Related post tidak akan relevan.
2. Sesuaikan Frekuensi Related Post
Jika blog Anda memiliki artikel pendek, sebaiknya atur related post muncul setiap 2 paragraf.
let insertEvery = 2; // Sisipkan setiap 2 paragraf
3. Cek Tampilan di Mobile
Pastikan tampilan related post tetap rapi di versi mobile. Jika terlalu besar, tambahkan CSS berikut:
@media screen and (max-width: 600px) {
.related-post-inline {
font-size: 12px;
padding: 8px;
}
}
Kesimpulan
Menampilkan related post di dalam artikel Blogger adalah cara efektif untuk meningkatkan keterlibatan pembaca. Dengan menggunakan kode di atas, Anda bisa menampilkan artikel terkait secara otomatis di antara paragraf tanpa harus mengedit setiap artikel secara manual.
✨ Keunggulan metode ini:
✅ Otomatis tanpa edit manual
✅ SEO Friendly dengan internal linking
✅ Desain rapi & profesional
✅ Bisa disesuaikan sesuai kebutuhan
Silakan coba di blog Anda dan lihat perbedaannya! Jika ada pertanyaan, tinggalkan komentar di bawah. Semoga bermanfaat!
Rate This Article
Thanks for reading: Membuat Related Post Di Tengah Blogspot, Sorry, my English is bad:)
