How to Add a Table of Contents to Blogger Posts

A table of contents shows readers what a post covers and lets them jump straight to the part they need. Long guides feel shorter, and readers stay longer. The theme gives you two styles that you write by hand, so you decide exactly what goes in the list.

Paste every example on this page in the post editor's HTML view, not in Compose view. To show HTML as code in your own posts, run it through the HTML Escape Tool first.

How it's built

The table is a <nav class="toc"> with a numbered list inside. Each item is a link to a heading in your post. The numbers are added for you, so don't type them.

<nav class="toc">
  <details open>
    <summary>Table of Contents</summary>
    <ol>
      <li><a href="#Buttons">Buttons</a></li>
      <li><a href="#Alerts">Alerts</a></li>
    </ol>
  </details>
</nav>

The two styles

1. Box

This is the default. A framed box with a title that folds the list open and closed. Put a second <ol> inside an item for sub-sections, and they are numbered 1.1, 1.2 and so on.

<nav class="toc">
  <details open>
    <summary>Table of Contents</summary>
    <ol>
      <li><a href="#Buttons">Buttons</a>
        <ol>
          <li><a href="#Default Button">Default Button</a></li>
          <li><a href="#Rounded Button">Rounded Button</a></li>
        </ol>
      </li>
      <li><a href="#Alerts">Alerts</a></li>
    </ol>
  </details>
</nav>

2. Grid

Add grid for two columns with large numbers and a short line under each title. Write the title with <b> and the short line with <small>. On phones the columns stack.

<nav class="toc grid">
  <b>Content:</b>
  <ol>
    <li><a href="#Why meta tags matter">Why meta tags matter
      <small>How meta tags help Google understand your site.</small></a></li>
    <li><a href="#Tags every page needs">Tags every page needs
      <small>Title, description and Open Graph.</small></a></li>
  </ol>
</nav>

Linking to headings

You don't need to add an id to your headings. Write the heading's text after #, and the theme finds the heading for you. Capital letters don't matter.

<h2>Contact Form</h2>

<a href="#Contact Form">Contact Form</a>

If a heading already has an id, you can link to it the usual way:

<h2 id="contact">Contact Form</h2>

<a href="#contact">Contact Form</a>

If you change a heading's text later, update its link too. Otherwise the link won't find the heading.

When a reader clicks a link, the page scrolls smoothly to that heading. As they read, the section they are in is highlighted in the table. Scroll this page and watch the table at the top.

Options

Start folded

Remove open from <details> to show only the title. Readers click it to see the list.

<nav class="toc">
  <details>
    <summary>Table of Contents</summary>
    ...
</nav>

A box that doesn't fold

Use <b> for the title instead of <details> and <summary>.

<nav class="toc">
  <b>Table of Contents</b>
  <ol>...</ol>
</nav>

Quick reference

You want	Write
Box that folds	<nav class="toc"><details open><summary>
Start folded	<details> without open
Box that doesn't fold	<nav class="toc"><b>Title</b>
Grid	<nav class="toc grid">
Sub-sections	an <ol> inside an <li> (box only)
Short line (grid)	<small> inside the link
Link to a heading	href="#Heading text"