Does this Table of Contents need JavaScript?

No. The generated code uses the native HTML details and summary elements for the collapse button and CSS counters for numbering, so it works even when JavaScript is disabled and never conflicts with a Blogger theme.

Why do the TOC links not jump on my blog?

A link like #my-heading only works if the matching heading on the page has id="my-heading". Turn on the Generate heading IDs option and the tool gives you the exact heading tags with the right ids to paste into your post.

Where do I paste the code in Blogger?

Open your post, switch the editor from Compose view to HTML view using the pencil icon, and paste the generated code at the top of the post body. The CSS is included in the same snippet, so there is nothing else to add.

Pure HTML/CSS Blogger Table of Contents Generator

⚡ No JavaScript • Blogger Ready

Pure HTML/CSS Table of Contents Generator

Build a clean, collapsible TOC for your Blogspot posts. Add your headings, tweak the look, and copy code that works the first time — with a live preview.

TOC title

Color theme

Collapsible Start expanded Numbered list Smooth scroll Generate heading IDs Header offset px

Your headings

Live preview

1 · Table of contents code

2 · Heading tags with IDs

What This Generator Does

Type your post headings on the left and pick a level for each one — H2 for main sections, H3 for sub‑sections, H4 for deeper points. Use the arrows to re‑order them. The preview on the right updates instantly, and the code boxes below hold the exact HTML and CSS to paste into Blogger. There is no sign‑up, no server, and nothing leaves your browser.

Why Pure HTML and CSS Matters for Blogger

Most TOC plugins rely on JavaScript, and Blogger's editor is picky about scripts — a single stray character can break a widget or stop the whole block from saving. This tool avoids that entirely. The collapse button is the native <details> element, the automatic numbering comes from CSS counters, and the smooth jump to each section is plain CSS. The result is a Table of Contents that loads fast, never clashes with your theme, and still works for visitors who have JavaScript turned off.

How to Add the TOC to Your Blogger Post

Open the post you want to update and switch the editor from Compose view to HTML view using the pencil icon in the top left. Paste the first code box (the Table of contents code) at the very top of the post body, then click Update. The CSS travels inside the same snippet, so there is no second file to install and nothing to add to your theme.

Make the Links Jump to the Right Place

A link such as #how-it-works only scrolls correctly when the matching heading on the page actually carries id="how-it-works". Blogger does not always add these IDs for you, which is the usual reason a TOC link appears to do nothing. Turn on Generate heading IDs and the second code box gives you each heading with the correct id already attached. Paste those over your existing headings (or copy the id onto them) and every link in the TOC will land exactly where it should. The Header offset number pushes the scroll point down by a few pixels so a sticky menu never covers the heading you jumped to.

Pro Tips for a Clean Table of Contents

Keep it to two levels. H2 plus H3 reads well on every screen. A TOC with four levels of nesting looks cramped on mobile and rarely helps the reader.
Match your real headings. The TOC should mirror the headings in the post word for word, so the reader is never surprised by what they land on.
Put it above the fold. Paste the code at the top of the article, before the introduction, so the outline is the first thing a visitor sees.
Test in HTML view. After saving, open the post and click a couple of links. If one does not jump, that heading is missing its id — the second code box fixes it.