How to Add a Floating Table of Contents in Blogger Website (2025)
A floating table of contents stays visible as a reader scrolls down a long post, making it easy to jump between sections without scrolling back to the top. Blogger has no built-in TOC feature, but you can add one using a short HTML/JavaScript widget that auto-generates a list of headings and keeps it pinned in place while the reader scrolls.
The Short Version
- Blogger has no native table-of-contents feature — this requires a small HTML/CSS/JavaScript snippet
- The TOC auto-builds itself from your post’s headings (H2/H3) rather than needing manual entry per post
- CSS
position: sticky(orfixed) keeps it visible during scroll - No external libraries needed — pure HTML, CSS, and JavaScript keeps it lightweight
- Best fit: long-form tutorials, guides, and any post with several distinct sections
Step 1: Back Up Your Template
As with any Blogger template edit, go to Theme → Backup/Restore and download your current template first, so any mistake in the next steps is fully reversible.
Step 2: Add the Auto-Generating TOC Script
Go to Theme → Edit HTML, find the closing </body> tag, and paste this code just before it. It scans each post for H2 and H3 headings, builds a linked list from them, and adds a “back to top” style sticky box:
<style>
#floating-toc {
position: sticky;
top: 80px;
max-width: 260px;
max-height: 70vh;
overflow-y: auto;
padding: 14px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background: #fafafa;
font-size: 14px;
}
#floating-toc a { display: block; padding: 4px 0; text-decoration: none; }
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
var post = document.querySelector(".post-body");
if (!post) return;
var headings = post.querySelectorAll("h2, h3");
if (headings.length < 2) return;
var toc = document.createElement("div");
toc.id = "floating-toc";
toc.innerHTML = "<strong>On this page</strong>";
headings.forEach(function (h, i) {
var id = "toc-heading-" + i;
h.id = id;
var link = document.createElement("a");
link.href = "#" + id;
link.textContent = h.textContent;
toc.appendChild(link);
});
var sidebar = document.querySelector("#sidebar-wrapper") || post.parentElement;
sidebar.insertBefore(toc, sidebar.firstChild);
});
</script>Save the template, open any post with multiple H2/H3 headings, and confirm the floating box appears with a clickable link for each section.
Step 3: Adjust the Sticky Position
The top: 80px value in the CSS controls how far from the top of the viewport the TOC sits once it becomes sticky — increase it if your header/navbar is taller than 80px, so the TOC doesn’t overlap it.
Common Issues and Fixes
| Issue | Cause | Fix |
|---|---|---|
| TOC never appears | Template uses a different content wrapper class than .post-body |
Inspect the page HTML to find the real class name and update the selector in the script |
| TOC overlaps the header when sticky | top value in CSS is smaller than your header’s height |
Increase the top: 80px value to match your header’s actual height |
| Links jump to the wrong section | Duplicate heading IDs elsewhere on the page | Confirm the script’s generated IDs (toc-heading-0, toc-heading-1, etc.) aren’t already used by another script or widget |
| TOC pushes sidebar widgets down oddly | Inserted at the top of a sidebar with fixed-height widgets above it | Adjust the insertBefore target in the script, or move the TOC to a different position in the sidebar manually |
A Realistic Example
A recipe blog with long posts (ingredients, prep steps, tips, variations, storage instructions) benefits heavily from this — readers can jump straight to “Storage Instructions” without scrolling past several paragraphs of narrative first, which both improves the reading experience and increases time-on-page, a small but real positive signal for SEO.
Why a Floating TOC Helps Readers and SEO
A sticky table of contents does two jobs at once. For readers, it lets them jump straight to the section they actually need in a long post instead of scrolling blindly — this matters most on tutorial and guide content where someone might only need step 4, not the whole article. For search engines, Google can surface individual TOC anchor links as “jump to section” sitelinks in search results for long-form content, which increases the real estate your listing occupies and can improve click-through rate.
Getting the Anchor Links Right
The auto-generating script builds its jump links from your heading text, but a few things commonly go wrong:
- Duplicate heading text — if two H2s in the same post say the exact same thing (e.g., two “Conclusion” headings across a series), the generated anchor IDs can collide. Keep heading text unique within a single post.
- Headings added after the TOC script runs — if you add new H2/H3 sections to a post later, the TOC needs the page to reload for the script to pick up the new headings; it does not update live while you are still editing.
- Special characters in headings — emoji or unusual punctuation in a heading can occasionally break anchor-ID generation depending on the script version. If a specific heading is not appearing correctly, try simplifying it first before assuming the whole setup is broken.
Customizing Which Headings Appear
Most implementations of this script default to pulling every H2 (and sometimes H3) into the TOC automatically. If a post has headings you do not want listed — a short aside or a disclaimer heading, for instance — the cleanest fix is a dedicated CSS class on that specific heading that the script is configured to skip, rather than manually excluding headings post by post. Check the specific script’s documentation for its exclude-class option, since implementations vary.
Should the TOC show on short posts too?
Generally no — a floating TOC on a 400-word post with two headings adds visual clutter without real navigational benefit. Most implementations let you set a minimum heading count or word count threshold before the TOC displays; a reasonable default is requiring at least 3-4 headings before showing it.
Does a TOC count as duplicate content since it repeats my headings?
No — search engines treat a table of contents as navigational aid, not duplicate body content, the same way they treat a site’s main navigation menu. It does not create a duplicate-content penalty or dilute the uniqueness of your actual article text.
Can I have both a top-of-post TOC and a floating sidebar TOC at the same time?
Yes, and some sites do exactly this — a compact clickable list right under the title for readers who want to see the full outline immediately, plus the floating version that stays visible while scrolling for readers already deep into the post. Just make sure both pull from the same heading structure so they stay in sync automatically rather than needing separate manual upkeep.
Frequently Asked Questions
Will this work on every Blogger template?
The script targets the standard .post-body class used by most Blogger templates. If your specific template uses a different class name, inspect the page’s HTML to find the correct content wrapper and adjust the selector in the script.
Does this slow down my blog?
No meaningfully — the script is a few lines of vanilla JavaScript with no external libraries, so the performance cost is negligible compared to most third-party widgets.
Can I make the TOC collapsible on mobile?
Yes — add a toggle button and a CSS class that hides the TOC’s link list by default on small screens, then show it when the button is clicked. This keeps the TOC from taking up too much vertical space on a phone screen.
Why doesn’t the TOC appear on some posts?
The script only builds a TOC when a post has at least two H2/H3 headings — this avoids showing a pointless one-link “table of contents” on short posts.
Can I style the TOC to match my blog’s colors?
Yes — every value in the #floating-toc CSS block (background color, border, font size) can be adjusted freely to match your blog’s existing design.
The Bottom Line
A floating, auto-generated table of contents is a small addition that meaningfully improves the experience of reading long posts, and it takes one script addition rather than manually building a TOC for every individual post. Once it’s added to your template, it works automatically on every future post with multiple headings.
