How to Add an Automatic Table of Contents in Blogger (Using Headings)

A Table of Contents (TOC) is a game-changer for long-form content, making it easier for readers to find what they need while boosting overall clarity. This tutorial will show you how to set up an automated TOC for your Blogger site using your existing post headings.

This setup treats:

• H1 / H2 as main headings
• H3 / H4 / H5 as subheadings

Step 1 — Add a TOC Container in Your Post Template

Place this where you want the TOC to appear:

<div id="post-toc"></div>

Step 2 — Add the JavaScript

Paste this script before `</body>` in your Blogger theme:

<script>//<![CDATA[
document.addEventListener("DOMContentLoaded",function(){const t=document.querySelector(".post-body"),e=document.getElementById("post-toc");if(!t||!e)return;const n=t.querySelectorAll("h1, h2, h3, h4, h5");if(!n.length)return;let o="<ul class='toc-list'>",l=0;for(n.forEach((t,e)=>{const n=parseInt(t.tagName.substring(1)),r="toc-heading-"+e;if(t.id=r,n>l)for(;n>l;)o+="<ul>",l++;else if(n<l)for(;n<l;)o+="</ul>",l--;o+=`<li class="toc-level-${n}">\n      <a href="#${r}">${t.textContent}</a>\n    </li>`});l>0;)o+="</ul>",l--;o+="</ul>",e.innerHTML=o});
//]]></script>

• Replace .post-body with the class used by your post container.

Step 3 — Add CSS Styling

Add this CSS to your template (usually before the ]]></b:skin> tag or within your <style> tags).

#post-toc{padding: 15px; margin: 20px 0; border-radius: 8px; background: #f8f9fa;}
.toc-list, .toc-list ul{list-style: none; padding-left: 15px; margin: 0;}
.toc-list li{margin: 6px 0;}
.toc-level-1, .toc-level-2{font-weight: 600;}
.toc-level-3, .toc-level-4, .toc-level-5{font-size: 0.95em; opacity: 0.85;}

Result

Your TOC will automatically:

• Detect all H1–H5 headings
• Create anchor links for each heading
• Nest subheadings under main headings
• Update automatically whenever you edit the post

Tips

• Use headings properly for best structure
• Avoid skipping heading levels when possible
• Style the TOC however you like to match your theme

And that’s it! Adding an automatic Table of Contents to Blogger is a great way to improve navigation, readability, and SEO for long-form content. With this setup, your TOC will stay updated automatically based on your headings—no manual editing required.