Membuat Table Of Content Otomatis Di Blogger Tanpa Input Manual

 

Cara membuat table of content di artikel blogger otomatis, membuat table of content otomatis di blogger tanpa manual, cara buat daftar isi table of content otomatis ada blogger, cara membuatkan daftar isi artikel table of content blogger.

Cara Membuat Table of Content Otomatis di Artikel Blogger Tanpa Input Manual

Blogger adalah salah satu platform blogging yang populer dan digunakan banyak orang untuk berbagi tulisan. Salah satu fitur penting untuk meningkatkan navigasi artikel panjang adalah dengan menambahkan Table of Contents (TOC) atau daftar isi. TOC membantu pembaca memahami struktur artikel dan langsung menuju ke bagian tertentu yang mereka minati. Dalam panduan ini, kami akan menunjukkan cara membuat TOC otomatis di Blogger tanpa harus memasukkan ID secara manual pada setiap heading.

Mengapa Membutuhkan Table of Contents?

1. Meningkatkan Pengalaman Pengguna (UX):
   TOC membantu pembaca memahami konten artikel Anda dengan cepat. Navigasi yang mudah dapat membuat mereka bertahan lebih lama di blog Anda.

2. SEO Friendly:
   Google menyukai konten yang terstruktur. Dengan TOC, artikel Anda memiliki navigasi yang baik dan meningkatkan peluang untuk mendapatkan sitelink di hasil pencarian.

3. Hemat Waktu:
   TOC otomatis menghemat waktu Anda karena Anda tidak perlu menambahkan tautan manual ke setiap heading.

---

Cara Membuat Table of Contents Otomatis di Blogger

Langkah-langkah berikut akan memandu Anda untuk membuat TOC otomatis di artikel Blogger. Panduan ini menggunakan HTML, CSS, dan JavaScript yang sepenuhnya otomatis tanpa perlu menginput ID secara manual.

---

1. Menambahkan CSS untuk Styling TOC

CSS digunakan untuk mengatur tampilan TOC agar lebih menarik. Anda bisa menyesuaikan warna, font, dan desain sesuai kebutuhan. Berikut adalah kode CSS yang akan memberikan tampilan modern dengan efek gradasi merah, border-radius, dan hover:

<style>
  .toc-container {
    background: linear-gradient(45deg, #ff4e50, #f9d423); /* Gradasi warna merah */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .toc-title {
    font-weight: bold;
    color: #fff;
    cursor: pointer; /* Menunjukkan elemen bisa diklik */
    font-size: 18px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .toc-title span {
    font-size: 20px;
    font-weight: bold;
    color: #fff; /* Warna ikon */
  }
  .toc-list {
    list-style: none;
    padding-left: 15px;
    margin: 0;
    display: none; /* Awalnya disembunyikan */
  }
  .toc-list li {
    margin-bottom: 8px;
    padding: 5px;
    background: rgba(255, 255, 255, 0.2); /* Efek transparan */
    border-radius: 5px;
    transition: all 0.3s ease;
  }
  .toc-list li:hover {
    background: rgba(255, 255, 255, 0.4); /* Highlight saat hover */
  }
  .toc-list a {
    text-decoration: none;
    color: #fff;
    font-size: 14px;
  }
  .toc-list a:hover {
    text-decoration: underline;
  }
</style>

---

2. Menambahkan JavaScript untuk Membuat TOC Otomatis

JavaScript digunakan untuk mendeteksi heading (<h2>, <h3>, dll.) di artikel Anda, menambahkan ID otomatis, dan menyusun daftar isi. Berikut adalah kode lengkapnya:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const content = document.querySelector(".post-body");
    const tocContainer = document.createElement("div");
    tocContainer.classList.add("toc-container");

    const tocTitle = document.createElement("div");
    tocTitle.classList.add("toc-title");
    tocTitle.innerHTML = `
      <span>Table of Contents</span>
      <span class="icon">+</span>
    `;

    const tocList = document.createElement("ul");
    tocList.classList.add("toc-list");

    const headings = content.querySelectorAll("h2, h3");
    if (headings.length > 0) {
      headings.forEach((heading, index) => {
        const id = "heading-" + index;
        heading.id = id;

        const listItem = document.createElement("li");
        listItem.classList.add(`toc-${heading.tagName.toLowerCase()}`);

        const link = document.createElement("a");
        link.href = "#" + id;
        link.innerText = heading.innerText;

        listItem.appendChild(link);
        tocList.appendChild(listItem);
      });

      tocContainer.appendChild(tocTitle);
      tocContainer.appendChild(tocList);
      content.insertBefore(tocContainer, content.firstChild);

      // Toggle functionality for accordion
      tocTitle.addEventListener("click", function () {
        const isClosed = tocList.style.display === "none";
        tocList.style.display = isClosed ? "block" : "none";
        const icon = tocTitle.querySelector(".icon");
        icon.textContent = isClosed ? "-" : "+";
      });

      // Display the TOC by default as closed
      tocList.style.display = "none";
    }
  });
</script>

---

3. Menyisipkan Kode ke Blogger

1. Buka Dashboard Blogger.
2. Pilih Theme > Edit HTML.
3. Tambahkan kode CSS sebelum tag </head>.
4. Tambahkan kode JavaScript sebelum tag </body>.

---

4. Cara Kerja TOC Otomatis

• Deteksi Otomatis Heading:
  JavaScript akan mendeteksi semua elemen heading (<h2>, <h3>) di dalam artikel Anda.

• Pembuatan ID Otomatis:
  Setiap heading akan diberikan ID unik seperti heading-0, heading-1, dan seterusnya. Anda tidak perlu menambahkan ID secara manual.

• Navigasi Internal:
  TOC akan secara otomatis membuat tautan menuju heading berdasarkan ID yang dihasilkan.

• Accordion yang Elegan:
  TOC bisa dibuka dan ditutup menggunakan ikon + dan -, membuat tampilan lebih interaktif.

---

Hasil Akhir

Setelah mengikuti langkah-langkah di atas, TOC otomatis akan tampil di artikel Blogger Anda dengan:

• Tampilan modern dengan gradasi merah dan border-radius.
• Kemampuan untuk membuka dan menutup daftar isi (accordion).
• Navigasi yang memudahkan pembaca langsung ke bagian tertentu dari artikel Anda.

---

Penutup

Dengan menambahkan TOC otomatis ke Blogger, Anda meningkatkan kualitas pengalaman pembaca dan membuat artikel Anda lebih terstruktur. Panduan ini dirancang agar mudah diterapkan bahkan bagi pemula. Jika Anda ingin menyesuaikan desain lebih lanjut, cukup ubah kode CSS sesuai keinginan Anda.

Semoga panduan ini membantu Anda dalam membuat blog yang lebih profesional dan ramah pengguna!