ZMedia Purwodadi
Home Tutorial

Membuat Table of Content & Related Post Otomatis di Blogger - Panduan Lengkap

LINTASIANA.COM
LINTASIANA.COM
• min read
Table of Contents
Membuat Table of Content & Related Post Otomatis di Blogger - Panduan Lengkap

Membuat Table of Content & Related Post Otomatis di Blogger: Panduan Lengkap & Original

Halo teman-teman sesama blogger dan para pembaca yang saya hormati. Hari ini saya ingin berbagi sebuah pengalaman pribadi yang saya lalui selama beberapa bulan terakhir dalam mengembangkan blog saya, yaitu lintasiana.com. Bagi saya, menjadi seorang blogger bukan sekadar menulis dan memposting artikel, melainkan sebuah proses belajar dan terus memperbaiki tampilan serta fungsi agar pengunjung merasa nyaman dan betah berada di dalam situs kita.

Saya ingat betul saat pertama kali mulai mengelola blog ini, saya hanya fokus pada tulisan dan konten. Namun lama-kelamaan saya menyadari bahwa tampilan dan fitur pendukung juga sangat penting. Banyak pengunjung datang, membaca satu halaman, lalu pergi begitu saja tanpa melihat halaman lain. Saya sadar ini karena blog saya belum memiliki fitur yang bisa menghubungkan satu artikel dengan artikel lainnya.

Selain itu, saya juga sering menerima komentar dari pembaca yang mengatakan bahwa artikel saya cukup panjang dan sulit menemukan bagian yang mereka cari. Saat itulah saya mulai mencari solusi: bagaimana cara membuat Table of Content atau Daftar Isi otomatis, dan juga Related Post atau Artikel Terkait yang muncul secara otomatis berdasarkan label artikel.

Saya sudah mencoba banyak cara. Ada yang saya temukan di YouTube, ada yang dari artikel tutorial, tapi hasilnya sering tidak sesuai harapan. Ada kode yang membuat blog menjadi berat, ada yang merusak tampilan template, ada juga yang harus mengubah kode inti sehingga saya khawatir terjadi kesalahan. Saya juga tidak ingin menggunakan plugin atau alat pihak ketiga yang membebani performa blog, karena saya tahu kecepatan muat adalah salah satu kunci utama agar blog disukai Google dan pengunjung.

Setelah mencoba, menyesuaikan, memperbaiki, dan menguji coba berkali-kali, akhirnya saya berhasil membuat sistem yang tepat. Saya berhasil menggabungkan fitur Table of Content, Related Post Otomatis, dan Daftar Isi Postingan Terkait dalam satu paket yang ringan, elegan, dan mudah dipasang. Fitur ini bekerja dengan cara membaca label artikel secara otomatis, mengambil data dari sistem Blogger, lalu menampilkannya dalam bentuk kartu yang rapi lengkap dengan gambar dan judul.

Melalui artikel ini, saya ingin berbagi seluruh proses dan kode lengkap yang sudah saya buat ini kepada kalian semua. Saya akan menjelaskan mulai dari alasan mengapa fitur ini sangat penting, cara kerjanya, hingga panduan pemasangan langkah demi langkah. Semua kode yang saya siapkan ini dirancang agar tidak mengganggu tampilan template yang sudah kamu miliki, sehingga kamu bisa memasangnya dengan aman dan mudah. Semoga artikel ini bisa bermanfaat dan membantu meningkatkan kualitas blog kamu masing-masing.

1. Mengapa Harus Membuat Table of Content dan Related Post?

Sebelum masuk ke teknis, mari kita pahami dulu pentingnya kedua fitur ini. Bagi banyak pemula, fitur ini mungkin terlihat hanya sebagai hiasan atau tambahan saja, padahal sebenarnya memiliki dampak besar terhadap perkembangan blog dalam jangka panjang.

Apa itu Table of Content?

Table of Content atau Daftar Isi adalah ringkasan poin-poin utama yang ada di dalam sebuah artikel panjang. Biasanya berisi judul-judul sub-bagian atau heading yang ada di teks. Fungsinya sangat sederhana namun sangat bermanfaat: memudahkan pembaca untuk langsung menuju bagian yang mereka butuhkan tanpa harus menggulir layar dari atas ke bawah.

Dari sisi pengalaman pengguna, ini membuat pembaca merasa dimudahkan dan dihargai. Mereka tidak perlu bosan membaca teks panjang untuk mencari informasi tertentu. Dari sisi SEO, keberadaan Table of Content membantu Google memahami struktur tulisan kita dengan lebih jelas, sehingga artikel lebih mudah diindeks dan peringkat pencarian bisa lebih baik. Selain itu, kehadiran fitur ini juga meningkatkan waktu tinggal pengunjung di halaman blog kita.

Apa itu Related Post?

Sedangkan Related Post atau Artikel Terkait adalah daftar rekomendasi artikel lain yang memiliki topik atau label yang sama dengan artikel yang sedang dibuka. Fitur ini berfungsi sebagai jembatan yang menghubungkan satu halaman dengan halaman lain di dalam blog kita.

Manfaat utama fitur ini antara lain:

  • Meningkatkan jumlah kunjungan ke halaman lain di situs kamu.
  • Mengurangi tingkat pentalan (bounce rate), yaitu persentase pengunjung yang datang lalu langsung pergi tanpa melihat konten lain.
  • Membantu pembaca menemukan informasi tambahan yang mungkin mereka butuhkan berdasarkan minat mereka saat membaca artikel tersebut.
  • Membantu Google mengenali hubungan antar halaman di dalam situs, yang sangat baik untuk struktur internal link dan optimasi SEO.

Hubungan dengan Optimasi Blog

Dengan membuat Table of Content, Related Post, dan Daftar Isi Postingan Terkait, kita tidak hanya membuat tampilan blog menjadi lebih cantik, tetapi juga mengoptimalkan blog secara menyeluruh. Pengunjung yang nyaman dan betah membaca konten kita cenderung akan kembali lagi di kemudian hari. Dan seperti yang kita ketahui, blog yang memiliki pengunjung tetap dan waktu tinggal yang lama adalah tujuan utama dari setiap pemilik situs.

2. Konsep dan Cara Kerja Fitur yang Kita Buat

Dalam panduan ini, kita tidak akan menggunakan plugin atau aplikasi tambahan yang berat. Semua fitur akan kita buat menggunakan kombinasi kode HTML, CSS, dan JavaScript yang sudah dioptimalkan agar ringan dan cepat. Berikut adalah konsep dan cara kerjanya yang sudah saya terapkan di blog saya:

✅ Related Post Otomatis

Sistem akan otomatis membaca label atau kategori dari artikel yang sedang dibuka. Kemudian sistem akan mengambil semua artikel lain yang memiliki label yang sama langsung dari data Blogger. Kita tidak perlu menuliskan daftarnya secara manual satu per satu setiap kali membuat konten baru. Ini sangat praktis, terutama jika kamu sering memposting artikel baru setiap harinya.

✅ Tampilan Modern dan Elegan

Setiap artikel ditampilkan dalam bentuk kartu yang rapi, lengkap dengan gambar thumbnail kecil di sebelah judulnya. Tampilannya dibuat dengan sudut membulat, bayangan lembut, dan efek saat diklik agar terasa interaktif dan menyenangkan dilihat. Desain ini juga sudah disesuaikan agar tetap terlihat bagus baik di HP, tablet, maupun komputer.

✅ Tombol Mengambang yang Mudah Diakses

Kita akan membuat sebuah tombol kecil berbentuk lingkaran dengan ikon tiga garis yang tetap berada di posisi tengah sisi kanan layar, meskipun halaman sedang digulir ke atas atau ke bawah. Ini membuat tombol selalu mudah ditemukan oleh pembaca kapan saja tanpa harus mencari-cari.

✅ Posisi Kotak yang Tepat

Saat tombol diklik, akan muncul sebuah kotak di tengah layar. Ukuran kotak dibuat pas dan responsif, sehingga tidak terlalu besar dan tidak terlalu kecil, tetap nyaman dibaca oleh pengunjung.

3. Persiapan Sebelum Memasang Kode

Sebelum kita masuk ke bagian kode, ada beberapa hal penting yang perlu kamu ketahui agar proses pemasangan berjalan lancar dan aman:

⚠️ PENTING UNTUK DIPERHATIKAN:

  1. Cadangkan Template — Sebelum mengedit apa pun, sangat disarankan untuk mencadangkan seluruh template blog kamu. Caranya masuk ke Dashboard Blogger → Tema → Ekspor Tema. Ini sangat penting jika terjadi kesalahan saat mengedit nantinya, kamu bisa kembali ke versi semula dengan mudah.
  2. Kode Aman & Tidak Mengganggu — Kode yang saya siapkan ini dirancang khusus agar tidak mengubah struktur atau gaya asli template kamu. Semua gaya hanya diterapkan pada elemen yang kita buat sendiri, jadi tampilan menu, header, dan bagian lain di blog kamu akan tetap sama seperti sebelumnya.
  3. Syarat Agar Berfungsi Sempurna — Agar fitur Related Post dan Daftar Isi Postingan Terkait bisa bekerja, setiap artikel yang kamu buat harus diberi Label/Kategori. Kode akan membaca label tersebut, jadi jika sebuah artikel tidak memiliki label, sistem akan menampilkan pesan bahwa artikel tersebut belum memiliki label.

4. Kode Lengkap HTML & CSS Siap Pakai

Berikut adalah kode lengkap yang sudah saya buatkan dan uji coba berfungsi sempurna. Kamu hanya perlu menyalin seluruh kode di bawah ini dan menempelkannya di bagian yang tepat di dalam template Blogger kamu.

<!-- STYLE CSS -->
<style>
body {
  font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.75;
  color: #2d3748;
  background: #f7fafc;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 820px;
  margin: 30px auto;
  padding: 0 20px;
  background: #ffffff;
  padding: 35px;
  border-radius: 12px;
  box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}
h1 {
  font-size: 2.2em;
  color: #1a202c;
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.3;
}
h2 {
  font-size: 1.7em;
  color: #1a202c;
  margin-top: 40px;
  margin-bottom: 15px;
  border-left: 4px solid #2E7D32;
  padding-left: 12px;
}
h3 {
  font-size: 1.3em;
  color: #2d3748;
  margin-top: 30px;
}
p {
  margin-bottom: 18px;
  text-align: justify;
}
ul, ol {
  padding-left: 22px;
  margin-bottom: 20px;
}
li {
  margin-bottom: 8px;
}
code {
  background: #edf2f7;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: monospace;
}
pre {
  background: #2d3748;
  color: #f7fafc;
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.6;
  margin: 20px 0;
}
.highlight {
  background: #f0fff4;
  border-left: 4px solid #2E7D32;
  padding: 15px;
  border-radius: 6px;
  margin: 20px 0;
}

/* TOMBOL & KOTAK RELATED POST */
.tombol-terkait {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 999;
  background: #2E7D32;
  color: #fff;
  border: none;
  padding: 14px 12px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tombol-terkait.buka { background: #c62828; }
.tombol-terkait:hover { opacity: 0.92; }
.ikon-garis { width: 20px; height: 20px; display: block; fill: currentColor; }
.kotak-terkait {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 998;
  width: 330px; max-height: 0; overflow: hidden;
  border-radius: 12px; background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  transition: max-height 0.35s ease;
}
.kotak-terkait.tampil { max-height: 480px; }
.isi-terkait { padding: 16px; overflow-y: auto; max-height: 480px; }
.isi-terkait h4 { margin: 0 0 14px; font-size: 15px; color: #1a1a1a; font-weight: 600; }
.daftar-terkait { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.kartu-artikel {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px;
  background: #fafafa; border-radius: 8px; border: 1px solid #f0f0f0;
  transition: 0.2s ease; text-decoration: none;
}
.kartu-artikel:hover { background: #f5f5f5; border-color: #e0e0e0; }
.thumb-artikel { width: 70px; height: 70px; object-fit: cover; border-radius: 6px; background: #eee; flex-shrink: 0; }
.judul-artikel {
  font-size: 14px; line-height: 1.4; color: #222; font-weight: 500; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.teks-kosong { font-size: 13px; color: #757575; padding: 15px 10px; text-align: center; }
</style>

<!-- TOMBOL IKON -->
<button class="tombol-terkait">
  <svg class="ikon-garis" viewBox="0 0 24 24">
    <path d="M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h18v2H3v-2z"/>
  </svg>
</button>

<!-- KOTAK DAFTAR -->
<div class="kotak-terkait">
  <div class="isi-terkait">
    <h4>📄 Artikel Berlabel Sama</h4>
    <div class="daftar-terkait"></div>
  </div>
</div>

<!-- SCRIPT OTOMATIS -->
<script>
document.addEventListener("DOMContentLoaded", function () {
  const tombol = document.querySelector(".tombol-terkait");
  const kotak = document.querySelector(".kotak-terkait");
  const daftar = document.querySelector(".daftar-terkait");
  const JUMLAH_MAKSIMAL = 5;
  let sudahDiambil = false;

  function ambilLabelAsli() {
    const linkLabel = document.querySelectorAll('a[href*="/search/label/"]');
    for (const link of linkLabel) {
      const teks = link.textContent.trim();
      if (teks && teks.length > 1 && !teks.includes("Home") && !teks.includes("«") && !teks.includes("»")) {
        return teks;
      }
    }
    const cocok = window.location.href.match(/\/search\/label\/([^/?#]+)/);
    if (cocok) return decodeURIComponent(cocok[1].replace(/\+/g, " "));
    return null;
  }

  async function ambilArtikel(label) {
    const urlDasar = window.location.origin;
    const urlRSS = `${urlDasar}/feeds/posts/default/-/${encodeURIComponent(label)}?alt=rss&max-results=${JUMLAH_MAKSIMAL + 5}`;
    try {
      const res = await fetch(urlRSS);
      if (!res.ok) throw new Error();
      const xml = new DOMParser().parseFromString(await res.text(), "text/xml");
      const items = Array.from(xml.querySelectorAll("item"));
      return items.map(item => {
        let gambar = "";
        const isi = item.querySelector("description")?.textContent || "";
        const cocokGambar = isi.match(/<img[^>]+src="([^"]+)"/i);
        if (cocokGambar) gambar = cocokGambar[1];
        return {
          judul: item.querySelector("title")?.textContent || "Tanpa Judul",
          link: item.querySelector("link")?.textContent || "#",
          gambar: gambar
        };
      });
    } catch { return []; }
  }

  async function tampilkan() {
    if (sudahDiambil) return;
    const label = ambilLabelAsli();
    if (!label) {
      daftar.innerHTML = `<div class="teks-kosong">⚠️ Artikel ini belum punya Label</div>`;
      sudahDiambil = true; return;
    }
    const artikel = await ambilArtikel(label);
    const urlSekarang = window.location.href;
    const hasil = [];
    for (const a of artikel) {
      if (a.link === urlSekarang) continue;
      hasil.push(`
        <a href="${a.link}" class="kartu-artikel" target="_blank" rel="noopener">
          <img src="${a.gambar || 'https://via.placeholder.com/70x70/f0f0f0/888?text=Gambar'}" alt="${a.judul}" class="thumb-artikel" loading="lazy">
          <h5 class="judul-artikel">${a.judul}</h5>
        </a>
      `);
      if (hasil.length >= JUMLAH_MAKSIMAL) break;
    }
    daftar.innerHTML = hasil.length ? hasil.join("") : `<div class="teks-kosong">Belum ada artikel lain</div>`;
    sudahDiambil = true;
  }

  tombol.addEventListener("click", async () => {
    tombol.classList.toggle("buka");
    kotak.classList.toggle("tampil");
    if (kotak.classList.contains("tampil")) await tampilkan();
  });
});
</script>

5. Cara Memasang Kode di Blogger

Berikut adalah langkah-langkah mudah untuk memasang kode ini di blog kamu tanpa merusak template:

  1. Masuk ke Dashboard Blogger.
  2. Pilih menu Tema di sisi kiri.
  3. Klik tombol Edit HTML.
  4. Cari bagian kode </body> (biasanya berada di paling bawah kode).
  5. Salin seluruh kode yang saya berikan di atas, lalu tempelkan tepat sebelum kode </body> tersebut.
  6. Klik tombol Simpan Tema.

Selesai! Sekarang fitur Related Post Otomatis dan Daftar Isi Postingan Terkait sudah terpasang dan berfungsi di blog kamu.

6. Penyesuaian yang Bisa Kamu Lakukan

Kode ini sudah siap pakai 100%, namun jika kamu ingin mengubah sedikit tampilannya sesuai selera, kamu bisa mengubah nilai-nilai berikut di bagian CSS:

  • Warna Tombol: Ubah kode #2E7D32 menjadi kode warna yang kamu inginkan.
  • Ukuran Kotak: Ubah nilai width: 330px untuk mengubah lebar kotak daftar.
  • Jumlah Artikel: Ubah angka 5 pada baris const JUMLAH_MAKSIMAL = 5; untuk menambah atau mengurangi jumlah artikel yang ditampilkan.
  • Ukuran Gambar: Ubah width: 70px; height: 70px; untuk memperbesar atau memperkecil gambar thumbnail.

7. Penutup

Membuat Table of Content, Related Post, dan Daftar Isi Postingan Terkait secara otomatis bukan lagi hal yang sulit atau rumit. Dengan kode yang sudah saya buatkan dan bagikan ini, kamu bisa memiliki fitur yang tidak hanya berfungsi dengan baik, tetapi juga membuat tampilan blog menjadi lebih modern dan profesional.

Selain itu, karena kode ini dirancang ringan dan tidak membebani performa, blog kamu akan tetap cepat dimuat, yang sangat baik untuk pengunjung dan juga untuk peringkat di Google. Pengalaman saya menunjukkan bahwa setelah memasang fitur seperti ini, tingkat keterlibatan pembaca meningkat dan kunjungan ke halaman lain juga bertambah secara signifikan.

Saya harap artikel dan kode yang saya buatkan berdasarkan pengalaman pribadi ini bisa bermanfaat bagi kamu semua. Jangan ragu untuk mencoba memasangnya, dan jika ada kendala, kamu bisa menyesuaikan sedikit kodenya sesuai panduan di atas. Semoga blog kamu semakin berkembang dan sukses.

Kata Kunci: membuat table of content blogger, membuat related post otomatis, membuat daftar isi postingan terkait, related post dengan thumbnail, table of content otomatis blogger, SEO blogger, optimasi template blogger.

Postingan Terkait : Baca Postingan Terkait Dari Lintasiana.Com yang paling banyak di baca pengunjung.
SELENGKAPNYA
⏳ Loading...

📄 Artikel Berlabel Sama

QRIS Donasi BAYAR LEWAT DANA