FULLY AUTOMATIC BLOGGER TOC (GLOBAL SETUP)

 

STEP 1 — ADD CSS

Go to:

Blogger → Theme → Edit HTML

Find:

</head>

Paste THIS above it:

<style>
/* =========================
GLOBAL AUTO TOC
========================= */

#light-toc{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:20px;
  margin:25px 0;
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
}

#toc_list{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:22px;
  font-weight:700;
  cursor:pointer;
  color:#111827;
  margin-bottom:15px;
}

#toc_list:hover{
  color:#2563eb;
}

#toc ol{
  margin:0;
  padding-left:20px;
}

#toc li{
  margin:10px 0;
  line-height:1.7;
}

#toc li a{
  text-decoration:none;
  color:#374151;
  transition:0.3s;
}

#toc li a:hover{
  color:#2563eb;
}

.toc-h3{
  margin-left:20px !important;
}

.toc-h4{
  margin-left:40px !important;
}

@media(max-width:768px){

#light-toc{
  padding:16px;
}

#toc_list{
  font-size:20px;
}

}
</style>

---

STEP 2 — ADD JAVASCRIPT

Find:

</body>

Paste THIS above it:

<script>
document.addEventListener("DOMContentLoaded", function () {

  // Find Blogger post body
  const article = document.querySelector(".post-body");

  if (!article) return;

  // Detect headings
  const headings = article.querySelectorAll("h2, h3, h4");

  // Stop if no headings
  if (headings.length < 2) return;

  // Create TOC container
  const tocBox = document.createElement("div");

  tocBox.id = "light-toc";

  tocBox.innerHTML = `
    <div id="toc_list" onclick="toggleTOC()">
      Contents
    </div>

    <div id="toc">
      <ol id="toc-content"></ol>
    </div>
  `;

  // Insert TOC automatically at top of article
  article.insertBefore(tocBox, article.firstChild);

  const toc = document.getElementById("toc-content");

  // Generate TOC items
  headings.forEach((heading, index) => {

    // Ignore empty headings
    if (heading.innerText.trim() === "") return;

    const id = "heading-" + index;

    heading.id = id;

    const li = document.createElement("li");

    // Nested levels
    if (heading.tagName === "H3") {
      li.classList.add("toc-h3");
    }

    if (heading.tagName === "H4") {
      li.classList.add("toc-h4");
    }

    li.innerHTML = `
      <a href="#${id}">
        ${heading.innerText}
      </a>
    `;

    toc.appendChild(li);

  });

});

// Toggle
function toggleTOC(){

  const toc = document.getElementById("toc");

  if(toc.style.display === "none"){
    toc.style.display = "block";
  } else {
    toc.style.display = "none";
  }

}
</script>

---

DONE ✅

Now TOC automatically appears on:

• Old posts

• New posts

• Every article automatically

You DO NOT need to:

• Add TOC manually

• Add HTML in posts

• Add IDs manually

---

IMPORTANT

Use article headings normally:

<h2>Main Heading</h2>

<h3>Sub Heading</h3>

<h4>Small Heading</h4>

TOC will generate automatically.