Kode HTML Baca Juga di Blogger, Mudah Diterapkan

Memberikan rekomendasi artikel terkait di dalam postingan blog adalah cara efektif untuk 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 postingan Blogger.

Langkah-langkah Membuat “Baca Juga” di Postingan Blogger

1. Masuk ke Dashboard Blogger

1. Buka Blogger Anda dan login menggunakan akun Google.
2. Pilih blog tempat Anda ingin menambahkan fitur “Baca Juga”.

2. Buat atau Edit Postingan

1. Klik Postingan Baru atau edit salah satu postingan yang sudah ada.
2. Masuk ke mode HTML (bukan mode Compose).

3. Salin dan Tempel Kode HTML

Gunakan kode HTML berikut untuk menambahkan “Baca Juga” 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

1. Ganti https://link-artikel-1.com, https://link-artikel-2.com, dan seterusnya dengan URL artikel yang relevan di blog Anda.
2. Sesuaikan “Judul Artikel 1“, “Judul Artikel 2“, dst., dengan judul artikel yang ingin Anda rekomendasikan.

5. Simpan dan Lihat Hasilnya

1. Setelah selesai mengedit, klik Simpan atau Perbarui postingan Anda.
2. Klik Pratinjau untuk melihat bagaimana “Baca Juga” 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”

1. Meningkatkan Pageviews: Pembaca cenderung mengeklik artikel terkait yang menarik.
2. Mempermudah Navigasi: Membantu pembaca menemukan artikel lain yang relevan.
3. SEO Friendly: Internal linking meningkatkan otoritas halaman blog Anda.

Kapan Menggunakan Kode Ini?

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 mendorong 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” sederhana di Blogger. Kini Anda dapat menyisipkan fitur ini dengan mudah di postingan blog Anda. Selamat mencoba!