How to Add a Table of Contents to Blogger

A Table of Contents (TOC) is a must-have for long blog posts, enhancing reader navigation and boosting SEO by enabling Google to display jump links in search results.

In this guide, I will walk you through adding a TOC to your Blogger posts using a simple script. No coding skills required—just copy and paste!

What is a Table of Contents?

A Table of Contents (TOC) is a clickable list of links that direct readers to specific sections within your blog post.

For instance, if your post includes headings like Introduction, Step 1, or Step 2, the TOC compiles them into a clean, organized box. Readers can click a link to jump directly to a section, eliminating endless scrolling.

Why Use a TOC?

Here’s why every Blogger user should implement a TOC:

• Enhanced Navigation: Simplifies reading lengthy posts.
• SEO Advantage: Google may feature TOC jump links in search results.
• Professional Appearance: Creates a polished, user-friendly blog layout.
• Mobile Optimization: Enables quick section access on smaller screens.

In essence, a TOC elevates user experience while improving search engine visibility.

Features of This TOC

• Automatically scans and lists H2 and H3 headings.
• Inserts a sleek, collapsible TOC box after the first paragraph.
• Responsive design for seamless desktop and mobile use.
• Easily customizable with basic CSS tweaks.

How to Add a TOC to Blogger

Follow these straightforward steps:

Step 1: Copy the TOC Script

<script type="text/plain">
//<![CDATA[
document.addEventListener("DOMContentLoaded", () => {
  function generateTOC(container) {
    if (!container) return;

    const tocWrapper = document.createElement("div");
    tocWrapper.className = "toc-wrapper";
    tocWrapper.innerHTML = `
      <div class="toc-header">
        <h2>Table of Contents</h2>
        <button class="toc-toggle" aria-label="Toggle Table of Contents">
          <svg class="icon-minus" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M2 8a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 8z"/>
          </svg>
          <svg class="icon-plus" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
            <path d="M8 2a.75.75 0 0 1 .75.75v4.5h4.5a.75.75 0 0 1 0 1.5h-4.5v4.5a.75.75 0 0 1-1.5 0v-4.5h-4.5a.75.75 0 0 1 0-1.5h4.5v-4.5A.75.75 0 0 1 8 2z"/>
          </svg>
        </button>
      </div>
      <ul class="toc-list"></ul>
    `;

    const firstP = container.querySelector("p");
    if (firstP) {
      firstP.insertAdjacentElement("afterend", tocWrapper);
    } else {
      container.prepend(tocWrapper);
    }

    const tocList = tocWrapper.querySelector(".toc-list");
    const headings = Array.from(container.querySelectorAll("h2, h3"))
      .filter(heading => !tocWrapper.contains(heading));

    if (!headings.length) return;

    headings.forEach((heading, index) => {
      if (!heading.id) heading.id = `heading-${index}`;

      const li = document.createElement("li");
      const a = document.createElement("a");
      a.href = `#${heading.id}`;
      a.textContent = heading.textContent;
      a.style.textDecoration = "none";
      a.style.color = "#333";

      li.appendChild(a);
      tocList.appendChild(li);
    });

    const toggleBtn = tocWrapper.querySelector(".toc-toggle");
    const iconMinus = toggleBtn.querySelector(".icon-minus");
    const iconPlus = toggleBtn.querySelector(".icon-plus");

    toggleBtn.addEventListener("click", () => {
      tocList.classList.toggle("collapsed");
      const isCollapsed = tocList.classList.contains("collapsed");
      iconMinus.style.display = isCollapsed ? "none" : "inline";
      iconPlus.style.display = isCollapsed ? "inline" : "none";
    });

    iconPlus.style.display = "none";
  }

  const style = document.createElement("style");
  style.textContent = `
    .toc-wrapper {
      border: 1px solid #e0e0e0;
      padding: 20px;
      margin: 25px 0;
      border-radius: 8px;
      background: #fafafa;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .toc-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .toc-header h2 {
      margin: 0;
      font-size: 20px;
      font-weight: 600;
    }
    .toc-toggle {
      border: none;
      background: none;
      cursor: pointer;
      padding: 4px;
      display: flex;
      align-items: center;
    }
    .toc-toggle svg {
      width: 20px;
      height: 20px;
      color: #444;
      transition: color 0.2s;
    }
    .toc-toggle:hover svg {
      color: #000;
    }
    .toc-wrapper ul {
      padding-left: 0;
      margin: 0 0 12px 20px;
      transition: max-height 0.3s ease, opacity 0.3s ease;
      overflow: hidden;
      max-height: 1000px;
      opacity: 1;
    }
    .toc-wrapper ul.collapsed {
      max-height: 0;
      opacity: 0;
    }
    .toc-wrapper li {
      list-style-type: none;
      margin-bottom: 10px !important;
      font-weight: 500;
    }
    .toc-wrapper li a {
      transition: color 0.2s;
    }
    .toc-wrapper li a:hover {
      text-decoration: underline;
      color: #1a73e8;
    }
    @media (max-width: 768px) {
      .toc-wrapper {
        padding: 15px;
      }
      .toc-wrapper ul {
        margin: 0 !important;
      }
    }
  `;
  document.head.appendChild(style);

  const postContent = document.querySelector(".post-body, .post-content");
  if (postContent) generateTOC(postContent);
});
//]]>
</script>
  

Step 2: Add the Script to Blogger

1. Navigate to Blogger Dashboard → Theme → Edit HTML.
2. Locate the closing </body> tag and paste the script just above it.
3. Click Save Theme.

NOTE: After adding the script, open a blog post on your website to verify the TOC displays correctly. If it doesn’t, check the browser’s console (F12 → Console) for error messages to troubleshoot.

What This TOC Code Does / Code working

Let me explain what my code does in a simple way. I designed it so that in every blog post, it automatically finds the first paragraph and injects a fully dynamic Table of Contents (TOC). I noticed that most TOC solutions online are tough to use and setting them up is really complicated. That’s why I created this code—it’s super easy. All you need to do is open your theme, find the closing </body> tag, paste this code right before it, and save. After that, open any article and you’ll see the TOC working automatically.

If you ever don’t want it in the future, just remove the script code. That’s it—simple and hassle-free!

Final Thoughts

Adding a TOC to your Blogger posts is a simple yet powerful way to enhance user experience and SEO. It gives your blog a professional, organized look and makes navigation effortless. Once implemented, every post with headings will automatically feature a sleek Table of Contents.