How to Add Table of Contents (TOC) to Blogger Posts Automatically (2025 Method) - Android Pols - latest news, natural remedies, and entertainment

How to Add Table of Contents (TOC) to Blogger Posts Automatically (2025 Method)

How to Add Table of Contents (TOC) to Blogger Posts Automatically (2025 Method)
How to Add Table of Contents (TOC) to Blogger Posts Automatically (2025 Method)


Improve your Blogger posts with an automatic Table of Contents (TOC). This 2025 guide shows you how to add clickable headings to improve SEO and user experience.


Why Add a Table of Contents (TOC) to Blogger?

A Table of Contents helps readers:

Navigate long blog posts easily
Jump to specific sections instantly
Stay longer on your blog (lower bounce rate)
Helps Google crawl your headings for SEO rich snippets


How to Add Table of Contents Automatically in Blogger

We’ll use a small JavaScript + CSS snippet to automatically create a clickable TOC based on your headings (like <h2>, <h3>, etc).


Step 1: Go to Theme → Edit HTML

  1. In your Blogger dashboard, go to Theme → ▼ → Edit HTML
  2. Search for </head> and paste this TOC CSS style above it:
<style>
#toc {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 20px;
}
#toc h2 {
  font-size: 16px;
  margin-bottom: 10px;
}
#toc ul {
  list-style-type: decimal;
  padding-left: 20px;
}
#toc ul li {
  margin-bottom: 6px;
}
</style>

Step 2: Add TOC JavaScript Before </body>

Search for </body> and paste this code above it:

<script>
document.addEventListener("DOMContentLoaded", function() {
  var content = document.querySelector('.post-body');
  if (!content) return;

  var headers = content.querySelectorAll("h2, h3");
  if (headers.length === 0) return;

  var toc = document.createElement("div");
  toc.id = "toc";
  toc.innerHTML = "<h2>Table of Contents</h2><ul></ul>";

  headers.forEach(function(header, index) {
    var id = "toc-" + index;
    header.id = id;

    var li = document.createElement("li");
    var link = document.createElement("a");
    link.href = "#" + id;
    link.textContent = header.textContent;

    li.appendChild(link);
    toc.querySelector("ul").appendChild(li);
  });

  content.insertBefore(toc, content.firstChild);
});
</script>

Step 3: Write Posts Using <h2> and <h3> Headings

Use proper headings in your blog post like this:

<h2>Introduction</h2>
<h2>Step 1: Open Blogger</h2>
<h2>Step 2: Edit HTML</h2>
<h3>Why It Works</h3>

The TOC will automatically pick up those headings and create a clickable list.


Benefits of TOC for SEO

Feature SEO Benefit
✅ Internal anchors Google indexes jump links for snippets
✅ Better structure Helps bots understand your content flow
✅ Enhanced UX Reduces bounce rate, boosts dwell time


Common Mistakes to Avoid

Mistake Solution
❌ Not using headings ✅ Always use <h2>, <h3> tags
❌ Placing script in wrong spot ✅ Put before </body> only
❌ Missing TOC styles ✅ Add CSS before </head>


Final Summary

Adding a Table of Contents to Blogger:

  • Improves navigation
  • Boosts SEO
  • Makes your blog look more professional

It’s especially useful for tutorials, guides, and long-form content.


Related Posts:
Previous article
Next article

Leave Comments

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel