How to Automatically Generate a Table of Contents Using Headings

When you’re publishing long-form articles on Blogger, readability and organization are just as important as the content itself. That’s where a Table of Contents (TOC) can make a big difference. Instead of making readers scroll through the entire article, a TOC provides a quick overview of your content and allows them to jump directly to the sections they’re interested in. It’s a simple addition, but it can significantly improve the user experience, help reduce bounce rates, and potentially support better SEO.

In this tutorial, you’ll learn how to add an automatic Table of Contents to your Blogger posts. The TOC automatically updates based on your headings, so you don’t have to manually edit the links whenever you add, remove, or rearrange sections in your article.

Once it’s set up, the TOC works in the background. It detects your headings and instantly generates a structured navigation list for your post

This setup uses your existing heading tags to create a logical hierarchy:

• Main sections: H1 / H2
• Sub-sections: H3 / H4 / H5

Step 1: Add TOC Container in Your Post Template

First, you need to define where the Table of Contents (TOC) will appear inside your blog post. I recommend you place it inside your post template so you don’t have to manually add it to every post.

What does a post template do? As I discussed in the Blogger Dashboard post, it allows your text or code to appear automatically whenever you create a new post.

1. Go to your Blogger dashboard, then select Settings.
2. Scroll down until you find the Post template (optional).
3. Once you find it, place the TOC code.

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

   
4. Then Save

Pro tip: I don’t recommend placing the TOC at the very top of your post. It’s usually better to place it after your introduction so readers can see your introductory content before reaching the Table of Contents.

Step 2: Add JavaScript

The JavaScript is what makes everything work. It scans your post for heading tags and creates a nested list of links that point to each section.

1. Go to your Blogger Dashboard, and select Theme.
2. Click the down arrow next to the Customize button
3. Select Edit HTML
4. Paste this script before </body> tag in your Blogger theme:

   <script>//<![CDATA[
   !function(){const e=()=>{const e=document.querySelector(".post-body"),t=document.getElementById("post-toc");if(!e||!t)return;const n=e.querySelectorAll("h1, h2, h3, h4, h5");if(!n.length)return;let r="<h2>Contents</h2><ul class='toc-list'>",a=parseInt(n[0].tagName.substring(1));n.forEach((e,t)=>{const n=parseInt(e.tagName.substring(1)),l=e.id||"toc-heading-"+t;e.id=l,n>a?r+="<ul>".repeat(n-a):n<a&&(r+="</ul>".repeat(a-n)),r+=`<li><a href="#${l}">${e.innerText}</a></li>`,a=n}),r+="</ul>".repeat(a),requestAnimationFrame(()=>{t.innerHTML=r})};"requestIdleCallback"in window?requestIdleCallback(e):setTimeout(e,10)}();
   //]]></script>
   

   Replace .post-body with the class used by your post container, make sure to replace it with the correct selector. Otherwise, the script won’t be able to find your content.

Step 3: Add CSS

Now that your TOC works, style it to match your blog’s design while keeping it easy to read.

Add this CSS to your template, usually before ]]></b:skin> or inside <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;}

This design is clean and minimal, but fully customizable with borders, icons, hover effects, or sticky positioning.

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

Final Thoughts

In my opinion, as blog posts become longer, easy navigation becomes essential. A TOC acts as a roadmap, helping readers quickly find what they need and explore your content without frustration.

It can also encourage readers to stay longer, explore more sections, and engage with your content—especially for tutorials, guides, and technical posts.

Since the system is fully automated, it saves time and keeps your posts consistent. In short, you’re not just adding a feature; you’re improving the overall blog experience.

If you have any questions or are just getting started, feel free to leave a comment. I’ll be happy to help! For more Blogger Customization Tutorials.