Cara membuat Daftar Isi (TOC) agar Muncul di Halaman tiap Artikel (Post) Blogger

Daftar Isi (Table of Contents/TOC) sangat membantu pembaca dalam menavigasi artikel panjang di blog. Namun, jika muncul di halaman beranda atau arsip, tampilannya bisa menjadi kurang estetis. Oleh karena itu, kita perlu mengatur TOC agar hanya muncul di halaman artikel (post) saja.

🔥Mengapa TOC Hanya Perlu di Halaman Artikel?

✔ Meningkatkan Pengalaman Pembaca – TOC memudahkan navigasi di artikel panjang tanpa mengganggu tampilan home. 

✔ Optimasi SEO – Struktur artikel yang lebih rapi dan terorganisir membantu indeksasi mesin pencari. 

✔ Tampilan Lebih Profesional – Blog terlihat lebih bersih dan tidak berantakan di halaman utama.

🚀 Cara Membuat TOC Hanya Muncul di Halaman Artikel

1️⃣ Tambahkan Kode HTML TOC

Masukkan kode HTML berikut ke dalam template Blogger atau langsung di dalam artikel:

<div class="toc-container">
  <h2 class="toc-title">📌 Daftar Isi</h2>
  <ul class="toc-list"></ul>
</div>

2️⃣ Tambahkan CSS untuk Tampilan TOC

Gunakan kode CSS ini untuk mempercantik tampilan TOC:

.toc-container {
  border: 2px solid #f39c12;
  background: #fffbe6;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
.toc-title {
  font-size: 18px;
  font-weight: bold;
  color: #e67e22;
  text-transform: uppercase;
}
.toc-list {
  list-style: none;
  padding-left: 10px;
}
.toc-list li {
  padding: 5px 0;
}
.toc-list a {
  text-decoration: none;
  color: #3498db;
  font-weight: 600;
}
.toc-list a:hover {
  color: #e74c3c;
}

3️⃣ Tambahkan JavaScript untuk Otomatisasi TOC

Tambahkan skrip JavaScript berikut untuk mengambil judul dalam artikel dan membuat TOC secara otomatis:

<script>
if (document.body.classList.contains('post')) {
    var tocList = document.querySelector(".toc-list");
    var headings = document.querySelectorAll("h2, h3, h4");
    headings.forEach((heading, index) => {
        var anchor = "heading-" + index;
        heading.setAttribute("id", anchor);
        var listItem = document.createElement("li");
        var link = document.createElement("a");
        link.setAttribute("href", "#" + anchor);
        link.textContent = heading.textContent;
        listItem.appendChild(link);
        tocList.appendChild(listItem);
    });
}
</script>

4️⃣ Pastikan TOC Tidak Muncul di Halaman Beranda

Untuk memastikan TOC hanya muncul di halaman artikel, gunakan kode ini di dalam template Blogger sebelum kode TOC:

<b:if cond='data:blog.pageType == "item"'>
  <!-- Kode TOC di sini -->
</b:if>

Kode di atas akan memastikan bahwa TOC hanya akan muncul di halaman artikel, bukan di halaman utama atau arsip.

🎯 Kesimpulan

🔹 Menggunakan TOC di blog membantu pembaca dalam menavigasi artikel panjang. 
🔹 Pastikan TOC hanya muncul di halaman artikel agar tidak mengganggu tampilan beranda. 
🔹 Gunakan kombinasi HTML, CSS, dan JavaScript untuk otomatisasi daftar isi yang dinamis.

💡 Call to Action (CTA): Jika Anda menemukan masalah dalam penerapan TOC, tulis pertanyaan di kolom komentar! Jangan lupa bagikan artikel ini jika bermanfaat! 😊

🎯 Kode lengkap

Tambahkan kode berikut sebelum "</head"

<!--kode-untuk-daftar-isi-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>    

.toc-container {

    border: 2px solid #f39c12;

    background: #fffbe6;

    padding: 15px;

    border-radius: 8px;

    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);

    margin-bottom: 20px;

}

.toc-title {

    font-size: 18px;

    font-weight: bold;

    color: #e67e22;

    text-transform: uppercase;

}

.toc-list {

    list-style: none;

    padding-left: 10px;

}

.toc-list li {

    padding: 5px 0;

}

.toc-list a {

    text-decoration: none;

    color: #3498db;

    font-weight: 600;

}

.toc-list a:hover {

    color: #e74c3c;

}

.toc-toggle {

    cursor: pointer;

    color: #e67e22;

    font-size: 14px;

}

</style>

</b:if>  

<!--sampe-sini-->    

Dan kode berikut ini sebelum "</body>"

 <!--kode-untuk-daftar-isi-->

<script>

document.addEventListener(&quot;DOMContentLoaded&quot;, function() {

    var postContent = document.querySelector(&quot;.post-body&quot;);

    if (!postContent) return;

    var headers = postContent.querySelectorAll(&quot;h2, h3, h4&quot;);

    if (headers.length === 0) return;

    var tocContainer = document.createElement(&quot;div&quot;);

    tocContainer.className = &quot;toc-container&quot;;

    

    var tocTitle = document.createElement(&quot;div&quot;);

    tocTitle.className = &quot;toc-title&quot;;

    tocTitle.innerHTML = &quot;📌 Daftar Isi <span class='toc-toggle'>(Tampilkan/Sembunyikan)</span>&quot;;

    

    var tocList = document.createElement(&quot;ul&quot;);

    tocList.className = &quot;toc-list&quot;;

    

    headers.forEach((header, index) =&gt; {

        var id = &quot;section-&quot; + index;

        header.id = id;

        

        var listItem = document.createElement(&quot;li&quot;);

        var link = document.createElement(&quot;a&quot;);

        link.href = &quot;#&quot; + id;

        link.innerText = header.innerText;

        

        listItem.appendChild(link);

        tocList.appendChild(listItem);

    });

    tocContainer.appendChild(tocTitle);

    tocContainer.appendChild(tocList);

    

    postContent.insertBefore(tocContainer, postContent.firstChild);

    

    // Toggle daftar isi

    document.querySelector(&quot;.toc-toggle&quot;).addEventListener(&quot;click&quot;, function() {

        tocList.style.display = (tocList.style.display === &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;;

    });

});

</script>

<!--sampe-sini-->