Baca Juga di Blogger adalah cara efektif untuk memberikan rekomendasi artikel terkait langsung di dalam postingan, sehingga dapat meningkatkan waktu kunjungan pembaca di blog Anda. Dalam tutorial ini, kita akan belajar cara membuat tampilan “Baca Juga” secara sederhana, tanpa perlu tambahan CSS eksternal. Cukup gunakan kode HTML yang bisa langsung diterapkan di setiap postingan Blogger.
Langkah-langkah Membuat Baca Juga di Blogger
1. Masuk ke Dashboard Blogger
- Buka Blogger Anda dan login menggunakan akun Google.
- Pilih blog tempat Anda ingin menambahkan fitur “Baca Juga”.
2. Buat atau Edit Postingan
- Klik Postingan Baru atau edit salah satu postingan yang sudah ada.
- Masuk ke mode HTML (bukan mode Compose).
Sumber daya
Blogger, Web Design, Content Creator, Graphic Designer, Personal Branding, Review Article, Content Placement.
3. Salin dan Tempel Kode HTML
Gunakan kode HTML berikut untuk menambahkan Baca Juga di Blogger ke dalam postingan:
<div style="border: 1px solid #ddd; border-radius: 5px; padding: 15px; background-color: #f9f9f9; margin: 20px 0;">
<h3 style="margin-top: 0; color: #333; font-size: 18px; font-weight: bold; text-align: center;">Baca Juga</h3>
<ul style="list-style-type: none; padding: 0; margin: 0;">
<li style="margin-bottom: 10px;">
<a href="https://link-artikel-1.com" style="color: #007bff; text-decoration: none;">Judul Artikel 1</a>
</li>
<li style="margin-bottom: 10px;">
<a href="https://link-artikel-2.com" style="color: #007bff; text-decoration: none;">Judul Artikel 2</a>
</li>
<li style="margin-bottom: 10px;">
<a href="https://link-artikel-3.com" style="color: #007bff; text-decoration: none;">Judul Artikel 3</a>
</li>
<li style="margin-bottom: 10px;">
<a href="https://link-artikel-4.com" style="color: #007bff; text-decoration: none;">Judul Artikel 4</a>
</li>
<li style="margin-bottom: 10px;">
<a href="https://link-artikel-5.com" style="color: #007bff; text-decoration: none;">Judul Artikel 5</a>
</li>
</ul>
</div>4. Edit Link dan Judul Artikel
- Ganti
https://link-artikel-1.com,https://link-artikel-2.com, dan seterusnya dengan URL artikel yang relevan di blog Anda. - Sesuaikan “Judul Artikel 1“, “Judul Artikel 2“, dst., dengan judul artikel yang ingin Anda rekomendasikan.
5. Simpan dan Lihat Hasilnya
- Setelah selesai mengedit, klik Simpan atau Perbarui postingan Anda.
- Klik Pratinjau untuk melihat bagaimana Baca Juga di Blogger tampil di postingan Anda.
Penjelasan Kode HTML
- Container Utama: Menggunakan elemen
<div>dengan gaya bawaan (border, padding, dan background-color) untuk membuat kotak “Baca Juga” terlihat rapi dan menonjol. - Judul: Elemen
<h3>digunakan untuk menampilkan teks “Baca Juga” dengan gaya tebal dan posisi tengah. - Daftar Artikel: Elemen
<ul>dan<li>digunakan untuk membuat daftar artikel, lengkap dengan link menuju artikel terkait. - Link Artikel: Setiap judul artikel menggunakan elemen
<a>dengan warna biru bawaan untuk menarik perhatian pembaca.
Keuntungan Menggunakan Baca Juga di Blogger
- Meningkatkan Pageviews: Pembaca cenderung mengeklik artikel terkait yang menarik.
- Mempermudah Navigasi: Membantu pembaca menemukan artikel lain yang relevan.
- SEO Friendly: Internal linking meningkatkan otoritas halaman blog Anda.
Kapan Menggunakan Kode Baca Juga di Blogger?
Kode ini dirancang fleksibel sehingga Anda bisa menggunakannya kapan saja. Misalnya:
- Di artikel dengan pembahasan mendalam untuk menambahkan referensi terkait.
- Saat mempromosikan artikel populer atau unggulan.
- Di postingan baru untuk mempermudah pembaca mengunjungi artikel lama.
Tips Tambahan
- Jangan terlalu banyak memasukkan link agar pembaca tidak bingung.
- Pastikan artikel yang direkomendasikan benar-benar relevan dengan topik postingan.
- Update link secara berkala agar selalu mengarahkan ke artikel yang masih relevan.
Itu dia tutorial singkat membuat Baca Juga di Blogger sederhana. Kini Anda dapat menyisipkan fitur ini dengan mudah di postingan blog Anda. Selamat mencoba!
Kode Baca Juga di Blogger telah saya modifikasi, Coba kode berikut ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Baca Juga Grid</title>
<style>
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 20px;
color: #333;
}
.popular-container {
max-width: 900px;
margin: 0 auto;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 25px;
}
.popular-header {
font-size: 24px;
font-weight: bold;
margin-bottom: 25px;
color: #222;
text-transform: uppercase;
letter-spacing: 1px;
}
.popular-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.popular-item {
border-bottom: 1px solid #eee;
padding-bottom: 15px;
}
.popular-number {
font-size: 16px;
font-weight: bold;
color: #666;
margin-bottom: 5px;
}
.popular-content {
font-size: 15px;
line-height: 1.4;
}
.popular-content a {
font-weight: bold;
text-decoration: none;
color: #333;
}
.popular-content a:hover {
color: #007BFF;
}
</style>
</head>
<body>
<div class="popular-container">
<div class="popular-header">Baca Juga</div>
<div class="popular-grid">
<!-- Baris 1 -->
<div class="popular-item">
<div class="popular-number">01</div>
<div class="popular-content">
<a href=“https://www.bloggerkalteng.com/2025/04/21/kode-html-membuat-timeline-di-blogger/”>Kode HTML Membuat Timeline di Blogger</a>
</div>
</div>
<div class="popular-item">
<div class="popular-number">02</div>
<div class="popular-content">
<a href="https://www.bloggerkalteng.com/2025/04/20/kode-html-membuat-accordion-faq-keren-di-blogger/">Kode HTML Membuat Accordion FAQ Keren di Blogger</a>
</div>
</div>
<div class="popular-item">
<div class="popular-number">03</div>
<div class="popular-content">
<a href="https://www.bloggerkalteng.com/2025/04/17/kode-html-progress-bar-skill/">Kode HTML Progress Bar Skill untuk WordPress dan Blogspot</a>
</div>
</div>
<!-- Baris 2 -->
<div class="popular-item">
<div class="popular-number">04</div>
<div class="popular-content">
<a href="https://www.bloggerkalteng.com/2025/04/21/kode-html-dan-css-widget-artikel-unggulan-di-blogger/">Kode HTML dan CSS Widget Artikel Unggulan di Blogger</a>
</div>
</div>
<div class="popular-item">
<div class="popular-number">05</div>
<div class="popular-content">
<a href="https://www.bloggerkalteng.com/2024/12/20/kode-html-dan-css-tabel-di-blogger/">Kode HTML dan CSS Tabel di Blogger</a>
</div>
</div>
<div class="popular-item">
<div class="popular-number">06</div>
<div class="popular-content">
<a href="https://www.bloggerkalteng.com/2022/07/24/kode-untuk-memunculkan-widget-di-tema-hello-elementor/">Kode untuk memunculkan widget di tema hello elementor
</a>
</div>
</div>
</div>
</div>
</body>
</html>
*artikel diperbaharui 21 April 2025
Tinggalkan komentar