CARA MEMBUAT TABLE OF CONTENT DI SEMUA TEMPLATE BLOGGER (FULL OTOMATIS)

Ingin membuat Table of Content (Daftar Isi) otomatis yang stylish dan hanya muncul di dalam artikel Blogger? Di artikel ini, kamu akan belajar cara membuat TOC interaktif dengan tombol mengambang dan popup elegan yang berfungsi di semua template Blogger, tanpa perlu modifikasi template secara rumit. Solusi ini kompatibel dengan semua template modern Blogger.

Penjelasan Table of Content di Blogger?

Table of Content (TOC) atau Daftar Isi adalah elemen navigasi yang memudahkan pembaca untuk langsung melompat ke bagian-bagian penting dari artikel. Biasanya dibuat berdasarkan heading seperti <h2>, <h3>, dan <h4>.

TOC ini sangat berguna untuk:

• Meningkatkan pengalaman pengguna (UX)

• Memperbaiki SEO (struktur konten lebih rapi)

• Meningkatkan waktu baca karena pembaca lebih mudah menjelajah konten

---

Fitur TOC Di Blogger yang Akan Kita Buat

• ✅ Tampil otomatis di semua postingan

• ✅ Tidak muncul di halaman beranda, label, atau halaman statis

• ✅ Hanya menggunakan gadget HTML/Javascript, tanpa edit template

• ✅ Tombol mengambang di kanan layar

• ✅ Muncul dalam bentuk popup elegan

• ✅ Otomatis mengambil struktur heading <h2>, <h3>, <h4>

• ✅ Responsive & ringan

---

Cara Memasang Table Of Content (TOC) Otomatis di Blogger

Berikut adalah langkah-langkah memasang table of content otomatis di semua template blogger.

1. Masuk ke Blogger

Buka dashboard Blogger kamu, kemudian masuk ke Tata Letak (Layout).

2. Tambahkan Gadget HTML/Javascript

Klik bagian Tambahkan Gadget, lalu pilih HTML/Javascript.

3. Tempelkan Kode TOC di Bawah Ini

Copy dan paste kode lengkap berikut ini ke dalam gadget tersebut:

<style>
  #toc-toggle {
    position: fixed;
    top: 50%;
    right: 10px;
    z-index: 9999;
    padding: 10px 15px;
    font-size: 20px;
    background-color: #226b16;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    display: none;
  }

  #toc-popup {
    display: none;
    position: fixed;
    right: 20px;
    top: 20%;
    width: 300px;
    max-height: 400px;
    overflow-y: auto;
    background: white;
    border: 1px solid #ccc;
    z-index: 9998;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 15px;
    font-family: Arial, sans-serif;
  }

  #toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
  }

  #toc-header strong {
    font-size: 16px;
  }

  #toc-close {
    cursor: pointer;
    font-weight: bold;
    color: #888;
    font-size: 18px;
  }

  #toc-popup ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  #toc-popup li {
    margin-bottom: 6px;
  }

  #toc-popup li a {
    text-decoration: none;
    display: block;
  }

  /* Gaya heading level */
  #toc-popup li.level-h2 a {
    color: #226b16;
    font-weight: bold;
    font-size: 15px;
    margin-left: 0;
  }

  #toc-popup li.level-h3 a {
    color: #1d4ed8;
    font-size: 14px;
    margin-left: 15px;
  }

  #toc-popup li.level-h4 a {
    color: #555;
    font-size: 13px;
    margin-left: 30px;
  }

  #toc-popup li a:hover {
    text-decoration: underline;
  }
</style>

<button id="toc-toggle" title="Daftar Isi">☰</button>

<div id="toc-popup">
  <div id="toc-header">
    <strong>Daftar Isi</strong>
    <span id="toc-close">×</span>
  </div>
  <div id="toc-content"></div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Deteksi apakah ini halaman postingan
    const isPostPage =
      window.location.pathname !== "/" &&
      !window.location.href.includes("/search") &&
      !window.location.href.includes("/label") &&
      document.querySelector(".post-body");

    if (!isPostPage) return;

    // Tampilkan tombol
    document.getElementById("toc-toggle").style.display = "block";

    const content = document.querySelector(".post-body");
    const tocContent = document.getElementById("toc-content");
    const toggleBtn = document.getElementById("toc-toggle");
    const closeBtn = document.getElementById("toc-close");
    const tocPopup = document.getElementById("toc-popup");

    const headings = content.querySelectorAll("h2, h3, h4");
    if (headings.length === 0) return;

    let tocHTML = "<ul>";
    headings.forEach((heading, index) => {
      const id = "toc_" + index;
      heading.id = id;
      const tag = heading.tagName.toLowerCase();
      const levelClass = "level-" + tag;
      tocHTML += `<li class="${levelClass}"><a href="#${id}">${heading.textContent}</a></li>`;
    });
    tocHTML += "</ul>";
    tocContent.innerHTML = tocHTML;

    toggleBtn.onclick = () => {
      tocPopup.style.display = tocPopup.style.display === "block" ? "none" : "block";
    };
    closeBtn.onclick = () => {
      tocPopup.style.display = "none";
    };
  });
</script>

---

Penjelasan Fungsinya Kode TOC (Daftar Isi Artikel)

• Tombol TOC (☰) hanya muncul di halaman postingan (.post-body)

• Popup Daftar Isi muncul ketika tombol diklik

• Heading seperti <h2>, <h3>, <h4> akan otomatis diubah jadi link

• Setiap link mengarah ke bagian dalam artikel (anchor)

---

Kustomisasi Table Of Content Di Blogger 

Kamu bisa mengganti warna tombol, posisi tombol (kiri, bawah), atau menambahkan animasi popup. Contoh:

• Ganti warna tombol: background-color: #226b16

• Ganti ikon tombol: ☰ → pakai gambar SVG/font-awesome

Dengan menggunakan cara ini, kamu bisa menambahkan TOC profesional dan SEO-friendly di Blogger tanpa ribet. Tidak perlu edit template, cukup tambahkan satu gadget HTML/Javascript saja.

TOC ini akan membuat blog kamu terlihat lebih profesional dan meningkatkan kenyamanan pembaca serta struktur SEO artikel.

---

Semoga bermanfaat!
Kalau kamu suka tips seperti ini, jangan lupa share ke teman Blogger lainnya 💡

Rate This Article

Thanks for reading: CARA MEMBUAT TABLE OF CONTENT DI SEMUA TEMPLATE BLOGGER (FULL OTOMATIS), Sorry, my English is bad:)