Related post atau "posting terkait" adalah salah satu fitur penting yang dapat meningkatkan interaksi pengguna di blog Anda. Dengan menampilkan posting terkait, Anda memberikan peluang bagi pembaca untuk menemukan lebih banyak konten menarik di blog Anda. Selain itu, ini juga bisa meningkatkan waktu kunjungan dan mengurangi bounce rate. Langsung saja kita membahas cara membuat related post di Blogger dengan menggunakan CSS, HTML, dan JavaScript.
Apa itu Related Post?
Related post adalah kumpulan artikel atau postingan yang relevan dengan konten yang sedang dibaca oleh pengunjung blog. Biasanya, related post ditempatkan di bagian akhir artikel untuk mendorong pembaca melihat konten lain yang mungkin menarik bagi mereka. Ini adalah cara yang efektif untuk mempertahankan pembaca di blog Anda lebih lama. Atau kamu juga bisa membaca lebih dalam tentang apa itu Related Post
Mengapa Related Post Penting?
1. Meningkatkan Pageviews
Dengan memberikan rekomendasi artikel terkait, Anda mendorong pembaca untuk menjelajahi lebih banyak halaman di blog Anda.
2. Mengurangi Bounce Rate
Pengunjung yang menemukan lebih banyak artikel yang menarik akan lebih mungkin untuk tetap berada di blog Anda daripada meninggalkan setelah membaca satu artikel.
3. Meningkatkan SEO
Pengunjung yang menghabiskan lebih banyak waktu di blog Anda dan membaca beberapa artikel dapat meningkatkan peringkat SEO Anda.
Tutorial Membuat Related Post di Blogger
Mari kita mulai dengan langkah-langkah untuk membuat related post di Blogger. Kita akan menggunakan kombinasi HTML, CSS, dan JavaScript untuk menambahkan fitur ini ke blog Anda.
Langkah 1: Tambahkan HTML untuk Related Post
Langkah pertama adalah menambahkan struktur HTML untuk related post. Anda dapat menambahkan kode ini di dalam template Blogger Anda di bagian yang sesuai.
- Masuk ke akun Blogger Anda.
- Pilih blog yang ingin Anda edit.
- Klik "Tema" di sidebar kiri.
- Klik "Edit HTML".
Tambahkan kode HTML berikut di tempat yang sesuai dalam template Anda, biasanya setelah tag `<b:if cond='data:blog.pageType == "item"'>`.
<div id="related-posts">
<h3>Related Posts</h3>
<ul id="related-post-list"></ul>
</div>
Langkah 2: Tambahkan CSS untuk Gaya Related Post
Selanjutnya, kita akan menambahkan beberapa CSS untuk menata tampilan related post agar lebih menarik. Tambahkan kode CSS berikut ke dalam template Anda di bagian `<head>` atau di dalam file CSS khusus jika Anda memilikinya.
<style>
#related-posts {
margin-top: 40px;
padding: 20px;
border-top: 2px solid #ddd;
}
#related-posts h3 {
margin-bottom: 20px;
font-size: 1.5em;
color: #333;
}
#related-post-list {
list-style: none;
padding: 0;
}
#related-post-list li {
margin-bottom: 10px;
}
#related-post-list a {
text-decoration: none;
color: #0066cc;
transition: color 0.3s;
}
#related-post-list a:hover {
color: #003399;
}
</style>
Langkah 3: Tambahkan JavaScript untuk Menampilkan Related Post
Sekarang, kita perlu menambahkan JavaScript untuk mengambil dan menampilkan related post berdasarkan label atau kategori yang sama. Tambahkan kode JavaScript berikut di akhir template Anda sebelum tag penutup `</body>`.
<script>
function fetchRelatedPosts() {
var labels = document.querySelectorAll('meta[itemprop="keywords"]')[0].content.split(', ');
var currentURL = window.location.href;
var relatedPostList = document.getElementById('related-post-list');
labels.forEach(function(label) {
fetch('/feeds/posts/summary/-/' + label + '?alt=json&max-results=5')
.then(response => response.json())
.then(data => {
var entries = data.feed.entry;
if (entries) {
entries.forEach(function(entry) {
var postTitle = entry.title.$t;
var postLink = entry.link.find(link => link.rel === 'alternate').href;
if (postLink !== currentURL) {
var listItem = document.createElement('li');
var linkItem = document.createElement('a');
linkItem.href = postLink;
linkItem.textContent = postTitle;
listItem.appendChild(linkItem);
relatedPostList.appendChild(listItem);
}
});
}
});
});
}
window.onload = function() {
fetchRelatedPosts();
};
</script>
Langkah 4: Menguji Related Post
Setelah menambahkan semua kode di atas, simpan perubahan pada template Anda dan buka salah satu postingan di blog Anda. Anda harus melihat bagian "Related Posts" di bawah artikel dengan daftar postingan yang terkait berdasarkan label.
Untuk melihat kode versi code pen silahkan klik disini
Kesimpulan
Dengan menambahkan fitur related post di blog Blogger Anda, Anda dapat meningkatkan keterlibatan pengunjung dan membuat mereka lebih lama berada di blog Anda. Langkah-langkah di atas memberikan panduan lengkap untuk menambahkan related post menggunakan HTML, CSS, dan JavaScript. Selamat mencoba dan semoga blog Anda semakin sukses!
Jika Anda mengalami kesulitan atau memiliki pertanyaan, jangan ragu untuk mencari bantuan lebih lanjut atau bertanya di komunitas Blogger. Semoga artikel ini bermanfaat dan membantu Anda dalam meningkatkan kualitas blog Anda.
Comments0