When you’re publishing long-form articles on Blogger, readability and structure become just as important as the content itself. That’s where a Table of Contents (TOC) comes in. Instead of forcing readers to scroll endlessly, a TOC gives them a quick overview of your post and lets them jump directly to the sections they care about. It’s a simple addition, but it can dramatically improve user experience, reduce bounce rates, and even support better SEO.
In this guide, you’ll learn how to create an automatic Table of Contents for your Blogger posts that:
- updates itself based on your headings
- no need to manually edit links every time you update your article
Once set up, it works in the background, detecting your headings and building a structured navigation list instantly.
This setup uses your existing heading tags in a logical way:
- H1 / H2 are treated as main sections
- H3 / H4 / H5 are treated as sub-sections
Installation Instructions
Setting up an automatic TOC in Blogger involves three main parts: adding a container, inserting JavaScript, and applying styling. Each step is straightforward, and once completed, your TOC will function automatically for all future posts.
Step 1 — Add a TOC Container in Your Post Template
First, you need to define where the Table of Contents will appear inside your blog post. This is done by inserting a simple HTML container.
Place the following code in your post template or directly inside your post content:
<aside id="post-toc"></aside>This empty container acts as a placeholder. Once the page loads, the script will automatically populate it with your headings.
You can position this container anywhere. At the top of your post, below the introduction, or even in the middle of your content. Most bloggers prefer placing it right after the opening paragraph for better visibility.
Step 2 — Add the JavaScript
The JavaScript is what makes everything work. It scans your post, finds all heading tags, and builds a nested list of links pointing to each section.
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-bodywith 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 Styling
Now that your TOC is functional, it’s time to make it visually appealing. Styling ensures that the TOC blends seamlessly with your blog’s design while remaining easy to read.
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;}This design keeps things clean and minimal, but you can customize it however you like. For example, you could add borders, icons, hover effects, or even 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
Tips
- Use headings properly for best structure
- Avoid skipping heading levels when possible
- Style the TOC however you like to match your theme
Why This Matters
As blog posts become longer and more detailed, navigation becomes essential. A TOC acts like a roadmap, guiding readers through your content and helping them find exactly what they need without frustration.
It also encourages users to stay longer on your page, explore multiple sections, and engage more deeply with your content. For tutorials, guides, and technical posts, this can make a huge difference in how your content is perceived.
And since this system is fully automated, it saves you time while maintaining consistency across all your posts.
In short, you’re not just adding a feature—you’re improving the overall experience of your blog.
That’s it. With just a small addition of HTML, JavaScript, and CSS, you now have an auto-updating Table of Contents for Blogger.