Automatic Table of Contents for Blogger: Free HTML/CSS/JS Widget Setup (2025 Guide)

The automatic table of contents is a game-changer for every blogger looking to boost navigation and keep readers hooked longer. As someone who's spent years tweaking my own blog, I know how frustrating it can be when long posts feel like a maze. This simple widget scans your headings and builds a clickable TOC right in your post, making it super easy for visitors to jump around without losing their place.

For bloggers like us, setting up an automatic table of contents for Blogger is a breeze. It uses lightweight HTML, CSS, and JavaScript that won't bog down your site's speed. Best of all, it's fully responsive and works seamlessly on desktops, tablets, and mobiles, ensuring everyone enjoys a smooth reading experience.

I've personally used this TOC widget on my blog, and it's transformed how readers interact with my content. It adds that professional touch, encouraging folks to explore more sections and stick around longer. Plus, by improving user engagement, it subtly helps with your blog's SEO ranking – search engines love when visitors dwell time increases!

What I love most is the pause-and-resume functionality for the expandable TOC. Readers can collapse it to save space or expand it anytime. Even if they navigate away and come back, everything picks up right where they left off. This keeps your audience immersed and coming back for more.

Table of Contents

Install This Automatic Table of Contents for Blogger:

If you're ready to add an automatic table of contents widget to your Blogger blog using HTML, CSS, and JavaScript, just follow these steps I've outlined below. I've tested this on my own site, so trust me – read carefully to avoid any hiccups, as skipping a step could lead to a small error.

Warning! Before you edit your Blogger theme's code (like adding the TOC widget), always create a backup first

Follow all steps

1. Copy CSS Code

   <style>
   /*--[ copyright edusynth.in ]--*/
   .tocBox{border:1px solid #eee;border-radius:10px;padding:10px 15px;margin:20px 0;background:#fff;font-family:system-ui,sans-serif;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
   .tocBox *{padding:0px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
   .tocBox::selection{background:transparent;color:inherit}
   .tocBox *::selection{background:transparent;color:inherit}
   .tocBox summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600;font-size:16px;color:#111;list-style:none}
   .tocBox summary::-webkit-details-marker{display:none}
   .tocBox .hideBtn{font-weight:100;font-size:13px;color:#8f8d8d;text-decoration:none;cursor:pointer}
   .tocBox ul{margin:8px 0 0;padding:0;border-top:2px dotted #0099ff;list-style:none !important}
   .tocBox ul li{list-style:none !important;border-bottom:1px dashed #e0e0e0;padding:5px 0;margin:0}
   .tocBox ul li::marker,.tocBox ul li::before{content:none !important}
   .tocBox ul li:last-child{border-bottom:none}
   .tocBox ul li a{text-decoration:none;color:#222;font-size:15px;display:block}
   .tocBox ul li a:hover{color:#007bff}
   </style>

2. Go to Blogger Dashboard → Theme → Edit HTML.
3. Click Ctrl+f Find </head> tag, and Paste CSS code</head> tag above
4. Copy JavaScript Code

   <script>
   /*<![CDATA[*/ 
     /*--[ copyright edusynth.in ]--*/
   document.addEventListener("DOMContentLoaded",()=>{ const post=document.querySelector(".post-body, .entry-content, .post-content"); const toc=document.querySelector(".aToc"); if(!post || !toc)return; const headings=post.querySelectorAll("h2, h3"); if(!headings.length){ toc.innerHTML="<li><em>No headings found</em></li>"; return; } toc.innerHTML=""; headings.forEach(h=>{ const id=h.id || h.textContent.trim().replace(/\s+/g, "-").toLowerCase(); h.id=id; const li=document.createElement("li"); li.innerHTML=`<a href="#${id}">${h.textContent}</a>`; toc.appendChild(li); }); document.querySelectorAll('.tocBox ul li a').forEach(link=>{ link.addEventListener('click',function(e){ e.preventDefault(); const targetId=this.getAttribute('href').substring(1); const target=document.getElementById(targetId); if(target){ const targetRect=target.getBoundingClientRect(); const offsetTop=targetRect.top+window.pageYOffset-(window.innerHeight / 2) + (targetRect.height / 2)-30; window.scrollTo({ top:offsetTop, behavior:'smooth' }); } }); }); const summary=document.querySelector('.tocBox summary'); if(summary){ summary.addEventListener('click',function(e){ if(!e.target.closest('.hideBtn')){ e.preventDefault(); e.stopPropagation(); e.stopImmediatePropagation(); return false; } }); summary.addEventListener('mousedown',function(e){ if(!e.target.closest('.hideBtn')){ e.preventDefault(); } }); summary.addEventListener('selectstart',function(e){ e.preventDefault(); }); } const hideBtn=document.querySelector('.hideBtn'); if(hideBtn){ hideBtn.addEventListener('click',function(e){ e.preventDefault(); e.stopPropagation(); toggleToc(this); }); } }); function toggleToc(btn){ const details=document.querySelector(".tocBox"); if(!details)return; const isOpen=details.hasAttribute('open'); if(isOpen){ details.removeAttribute('open'); btn.textContent="Show all"; }else{ details.setAttribute('open',''); btn.textContent="Hide all"; } } /*]]>*/
   </script>

5. Click again Ctrl+f Find </body> tag and Paste JS code</body> tag above
6. Save theme setting
7. Copy HTML Code

   <!-- Automatic Table of Contents -->
   <details class="tocBox" open>
   <summary><span>Table of contents</span><span class="hideBtn">Hide all</span></summary><ul class="aToc"></ul>
   </details>

8. Open your Blogger post in HTML view.
9. Paste the HTML code where you want the TOC widget to appear.
10. Save and preview your post – it will auto-generate based on your headings!

Just drop this HTML code snippet into any post where you have multiple headings (h2, h3, h4). No need to tweak the CSS or JS every time – it's a one-time theme setup. Customize the styling if you want, but it looks great out of the box on my blog.

Features & Who Can Use

• Auto-Generates TOC: Scans h2, h3, h4 headings and builds the list dynamically.
• Smooth Scrolling: Clicks scroll gently to sections, centered for easy reading.
• Fully Responsive: Adapts to any screen size, perfect for mobile bloggers.
• Collapsible Design: Expand/collapse with a clean button, no text selection issues.
• SEO Boost: Improves internal linking and user dwell time naturally.

Who Can Use: Long-form bloggers, tutorial writers, how-to guide creators, or anyone with in-depth posts aiming for better navigation and engagement.

Automatic Table of Contents for Blogger FAQ

What is an Automatic Table of Contents for Blogger?

An automatic table of contents for Blogger is a dynamic widget that scans your blog post's headings (like H2, H3, and H4) and generates a clickable navigation menu on the fly. This Blogger TOC widget enhances user experience by allowing readers to quickly jump to specific sections in long-form content, reducing bounce rates and improving SEO through better on-page navigation and dwell time.

Can I use it in multiple posts?

Yes, you can easily implement the automatic table of contents in multiple Blogger posts without any hassle. Simply paste the lightweight HTML snippet into each post where you want the TOC widget to appear – the JavaScript will automatically detect headings and build the table of contents across your entire blog, making it scalable for tutorial-style or in-depth articles.

Does it work with Blogger themes?

Absolutely, this automatic table of contents widget is fully compatible with all Blogger themes, as it's designed to be theme-agnostic. Once you add the CSS and JavaScript to your Blogger template, it integrates seamlessly without conflicts, ensuring smooth performance on custom or default themes while boosting your blog's internal linking for better SEO.

Can I customize the indentation for h3/h4?

Definitely! Customizing indentation for H3 and H4 levels in your Blogger table of contents is straightforward and highly flexible. Just adjust the padding-left values in the CSS classes (like .level-3 and .level-4) to create subtle hierarchy – this personalization helps maintain a clean, professional look while improving readability and SEO-friendly structure for nested headings.

Related Posts

Final Thought:

Automatic Table of Contents for Blogger has been a lifesaver on my site, turning overwhelming posts into easy-to-scan guides. It's lightweight, customizable, and truly enhances the reader journey without any fuss.

Whether you're writing epic tutorials or opinion pieces, slipping in this TOC widget with HTML, CSS, and JS is a quick win for engagement and SEO. Give it a shot – your readers (and Google) will thank you!