EASY BLOGGER TOC SETUP (FAST METHOD)

Contents

Step 1 — Open Blogger Theme

• Go to Blogger Dashboard

• Click Theme

• Click ▼

• Click Edit HTML

---

STEP 2 — ADD CSS

Find this code:

</head>

Paste THIS code just ABOVE it:

<style>
#light-toc{
background:#f5f5f5;
padding:15px;
border-radius:6px;
margin:20px 0;
border:1px solid #ddd
}

#toc_list{
font-weight:bold;
cursor:pointer;
margin-bottom:10px;
font-size:20px
}

#toc li{
margin:8px 0
}

#toc li a{
text-decoration:none;
color:#222
}

#toc li a:hover{
color:#1e90ff
}

.toc-h3{
margin-left:20px
}

.toc-h4{
margin-left:40px
}
</style>

---

STEP 3 — ADD JAVASCRIPT

Find:

</body>

Paste THIS code just ABOVE it:

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

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

if(!toc) return;

const headings = document.querySelectorAll(".post-body h2, .post-body h3, .post-body h4");

headings.forEach((heading, index) => {

const id = "heading-" + index;

heading.id = id;

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

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);

});

});

function toggleTOC(){

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

toc.style.display =
toc.style.display === "none"
? "block"
: "none";

}
</script>

---

STEP 4 — ADD TOC INSIDE POSTS

Whenever writing a post, switch to HTML View and paste THIS where you want TOC to appear:

<div id="light-toc">

<div id="toc_list" onclick="toggleTOC()">
Contents
</div>

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

</div>

---

STEP 5 — USE HEADINGS

Write your article using headings like this:

<h2>Introduction</h2>

<h3>What is SEO?</h3>

<h2>Benefits of SEO</h2>

<h4>Technical SEO</h4>

---

DONE ✅

Now your Blogger posts will automatically:

• Generate TOC

• Add heading links

• Create smooth navigation

• Detect all H2/H3/H4 headings

• Update automatically on every post