Cara Membuat TOC (Daftar Isi) Otomatis di Blogger Tanpa Plugin

Memasang Table of Contents (TOC) atau Daftar Isi otomatis di artikel Blogger merupakan salah satu cara efektif untuk meningkatkan kualitas SEO dan kenyamanan pengunjung (User Experience). Dengan daftar isi, pembaca dapat langsung melompat ke sub-judul yang dicari tanpa perlu menggeser (scroll) layar terlalu jauh.

Tutorial ini menggunakan kode JavaScript ringan (vanilla JS) tanpa membutuhkan jQuery, sehingga tidak akan memperlambat waktu muat (loading) blog Anda.

---

Langkah 1: Pasang Kode CSS (Tampilan TOC)

Kode CSS ini berfungsi untuk mengatur tampilan kotak Daftar Isi agar terlihat rapi dan responsif di semua perangkat.

1. Masuk ke Dashboard Blogger > Tema (Theme) > Edit HTML.
2. Cari kode <]]></b:skin> atau </style> (Gunakan tombol Ctrl + F untuk mempermudah pencarian).
3. Tempelkan kode CSS berikut tepat di atas kode <]]></b:skin> atau </style>:

   /* Style Table of Contents (TOC) Otomatis */
   .toc-box {
     background-color: #f8f9fa;
     border: 1px solid #dee2e6;
     border-radius: 6px;
     padding: 15px 20px;
     margin: 20px 0;
     display: table;
     min-width: 280px;
   }
   .toc-title {
     font-weight: bold;
     font-size: 16px;
     margin-bottom: 10px;
     color: #333;
   }
   .toc-list {
     padding-left: 20px;
     margin: 0;
   }
   .toc-list li {
     margin-bottom: 6px;
     font-size: 14px;
   }
   .toc-list li a {
     color: #0066cc;
     text-decoration: none;
   }
   .toc-list li a:hover {
     text-decoration: underline;
   }
   .toc-h3 {
     margin-left: 15px;
   }

---

Langkah 2: Pasang JavaScript Otomatis

Script ini bertugas memindai seluruh Sub-Judul (<h2> dan <h3>) di dalam artikel, lalu secara otomatis membuatkan tautan daftar isi.

1. Masih di halaman Edit HTML template Blogger.
2. Cari tag </body>.
3. Tempelkan kode JavaScript berikut tepat di atas tag </body>:

   <!-- Script TOC Otomatis -->
   <script>
   //<![CDATA[
   document.addEventListener("DOMContentLoaded", function() {
     var tocContainer = document.getElementById("toc-auto");
     var postBody = document.querySelector(".post-body");
   
     if (tocContainer && postBody) {
       var headings = postBody.querySelectorAll("h2, h3");
       if (headings.length > 0) {
         var tocList = document.createElement("ol");
         tocList.className = "toc-list";
   
         headings.forEach(function(heading, index) {
           var id = "toc-head-" + index;
           heading.setAttribute("id", id);
   
           var listItem = document.createElement("li");
           if (heading.tagName.toLowerCase() === "h3") {
             listItem.className = "toc-h3";
           }
   
           var link = document.createElement("a");
           link.setAttribute("href", "#" + id);
           link.textContent = heading.textContent;
   
           listItem.appendChild(link);
           tocList.appendChild(listItem);
         });
   
         tocContainer.appendChild(tocList);
       } else {
         tocContainer.style.display = "none";
       }
     }
   });
   //]]>
   </script>

4. Klik tombol Simpan (Save Theme).

---

Langkah 3: Cara Menampilkan TOC di Artikel

Setelah kode CSS dan JavaScript terpasang di template, setiap kali Anda menulis artikel baru:

1. Pada editor artikel Blogger, ubah mode penulisan dari Tampilan Menulis (Compose view) menjadi Tampilan HTML (HTML view).
2. Letakkan kode HTML berikut di posisi yang Anda inginkan (biasanya diletakkan di bawah paragraf pertama atau sebelum Heading <h2> pertama):

   <div class="toc-box">
     <div class="toc-title">Daftar Isi:</div>
     <div id="toc-auto"></div>
   </div>

3. Kembalikan ke mode Tampilan Menulis (Compose view), lalu publikasikan artikel Anda.

---

Catatan Penting agar Script Bekerja:

• Pastikan Anda menggunakan penformatan Heading (<h2>) atau Subheading (<h3>) saat membuat sub-judul bagian di dalam artikel.
• Jika artikel tidak memiliki <h2> atau <h3>, kotak TOC secara otomatis akan disembunyikan sehingga tidak mengganggu tampilan halaman.

Read More