Step-by-step tutorial on adding a clickable automatic table of contents to Blogger posts. Improve blog structure, SEO, and reader engageme

How to Add an Automatic Table of Contents to Your Blogger

Table of Contents

▼

Overview

In this guide, I'll show you how to add an automatic Table of Contents (TOC) to your Blogger posts, complete with a stylish box and copy button for the code. This will help your readers navigate through your content easily.

Note: This table of contents is automatically generated based on the headings in this article. Try clicking on any item to jump to the desired section.

Complete Steps

1. Add JavaScript Code to the Template

First, we need to add the main JavaScript function to your Blogger template. Follow these steps:

JavaScript Code

// Step 1: Add JavaScript code to the template

function generateBloggerTOC(containerId) {

    var tocContainer = document.getElementById(containerId);

    if (!tocContainer) return;

    var headings = document.querySelectorAll('h2, h3');

    if (headings.length === 0) {

        tocContainer.innerHTML = '<p>No headings found in this post.</p>';

        return;

    }

    var tocHTML = '<ul>';

    var currentLevel = 0;

    for (var i = 0; i < headings.length; i++) {

        var heading = headings[i];

        var level = parseInt(heading.tagName.substring(1));

        

        if (!heading.id) {

            heading.id = 'section-' + i;

        }

        if (level > currentLevel) {

            tocHTML += '<ul>';

        } else if (level < currentLevel) {

            tocHTML += '</ul></li>'.repeat(currentLevel - level);

        } else if (i !== 0) {

            tocHTML += '</li>';

        }

        tocHTML += '<li><a href="#' + heading.id + '">' + heading.textContent + '</a>';

        currentLevel = level;

    }

    tocHTML += '</li></ul>';

    tocContainer.innerHTML = tocHTML;

    tocContainer.classList.add('toc-generated');

}

function copyTOCCode() {

    const code = `<div id="toc-container-blogger"></div>\n<script>generateBloggerTOC('toc-container-blogger');</script>`;

    navigator.clipboard.writeText(code).then(() => {

        alert('Code copied successfully! Paste it in your post where you want the table of contents to appear.');

    }).catch(err => {

        console.error('Failed to copy: ', err);

    });

}

2. Add Design Styles

Now you need to add the CSS styles. Find ]]></b:skin> in the template and add before it:

CSS Code

/* Table of contents styles */

.toc-box {

  background: #f8f9fa;

  border: 1px solid #eaecf0;

  border-radius: 8px;

  padding: 0;

  margin: 25px 0;

  overflow: hidden;

}

.toc-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 15px 20px;

  background-color: #ffd6e7;

  cursor: pointer;

}

.toc-header h2 {

  font-weight: bold;

  font-size: 1.5em;

  color: #d64a94;

  margin: 0;

}

.toc-content {

  height: 210px;

  overflow-y: auto;

  padding: 15px 20px;

}

.toc-generated ul {

  list-style-type: none;

  padding: 0;

  margin: 0;

}

.toc-generated li {

  margin: 10px 0;

  position: relative;

  padding-left: 20px;

}

.toc-generated li a {

  color: #3366cc;

  text-decoration: none;

  display: block;

  padding: 6px 0;

}

.toc-generated ul ul {

  padding-left: 25px;

  border-left: 2px dashed #dde1e6;

  margin: 8px 0;

}

3. Using the Table of Contents in Posts

Now, when creating a new post or editing an existing one, place the following code where you want the table of contents to appear (in HTML mode):

HTML Code

<div id="toc-container-blogger"></div>

<script>generateBloggerTOC('toc-container-blogger');</script>

Additional Tips

To ensure the table of contents works properly:

• Make sure to use proper headings (H2, H3, H4) in your post
• You can customize the colors in CSS to match your blog's design
• If you want to change which heading levels appear in the table, change the value of h2, h3, h4 in the querySelectorAll line

Warning: Be careful to copy the codes accurately and avoid modifying parts of them unless you know what you're doing.

Troubleshooting

If the table of contents doesn't appear:

• Make sure you've used appropriate headings in your post
• Check that the code has been added correctly to the template
• Make sure you're not using the same ID for more than one element

This solution is designed to work directly without needing complex modifications. Try copying the codes above and pasting them into your blog.

This code will create an automatic table of contents with a stylish box and built-in copy button, making it easier for your readers to navigate through your article content.