Design for table of contents | How to add Table of Contents in blogger?

Introduction

In this blog post, we will discuss, how to add or create a design for table of contents automatically in a blogger post. you just have to add a CSS code, an optimized Javascript code, and 6-7 lines of HTML code. Also, I will give you the exact CSS code for the design in the picture. Further, if you know CSS you can change colors and design according to your need. The colors used in this design have a perfect contrast ratio, so you will not face accessibility issues in page speed insights. The table of contents will look like this: 

Closed TOC:

Opened TOC:

Step 1: Adding CSS to the template Code

1. First, go to your blogger account and back up the template from the themes section, if in case you mess up with the code.

2. Click on HTML view and open the template.

3. Click anywhere in the code and then press Ctrl + f and search for </b:skin>.

4. Add the below CSS code just before </b:skin>. This code will give style to the table of contents.

.toc-container {
    position: relative;
}

.toc-container .mbtTOC {
    border: none;
    box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    background-color: #ffffff;
    color: #333;
    line-height: 1.4em;
    margin: 30px auto;
    padding: 20px 30px;
    font-family: 'Roboto', sans-serif;
    width: 350px; /* Increased width for desktop */
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.toc-container .mbtTOC button {
    background: #077ea7;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    position: relative;
    outline: none;
    cursor: pointer;
    border: none;
    color: #ffffff;
    padding: 10px 15px;
    display: block;
    width: 100%;
    text-align: left;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.toc-container .mbtTOC button:hover {
    background: #4CAF50;
}

.toc-container .mbtTOC button .toggle-text {
    font-size: 16px;
    color: #ffffff;
    float: right;
}

.toc-container .mbtTOC ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none; /* Initially hidden */
}

.toc-container .mbtTOC ul li {
    padding: 10px 0;
    font-size: 16px;
}

.toc-container .mbtTOC a {
    color: #0871b2;
    text-decoration: none;
    display: block;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.toc-container .mbtTOC a:hover {
    color: #0826b2;
}

.toc-container .toc-h1 {
    font-size: 18px;
    font-weight: bold;
    margin-left: 0;
}

.toc-container .toc-h2 {
    font-size: 16px;
    margin-left: 20px;
}

.toc-container .toc-h3 {
    font-size: 14px;
    margin-left: 40px;
}
@media (min-width: 360px) {
    .toc-container .mbtTOC {
        width: 90%;
        position: static;
        margin: 10px auto;
        box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    }
}

@media (min-width: 468px) {
    .toc-container .mbtTOC {
        width: 70%;
        position: static;
        margin: 10px auto;
        box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    }
}

/* Responsive */
@media (min-width: 768px) {
    .toc-container .mbtTOC {
        width: 70%;
        position: static;
        margin: 10px auto;
        box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    }
}

@media (min-width: 980px) {
    .toc-container .mbtTOC {
        width: 70%;
        position: static;
        margin: 10px auto;
        box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    }
}

@media (min-width: 1200px) {
    .toc-container .mbtTOC {
        width: 70%;
        position: static;
        margin: 10px auto;
        box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    }
}
@media (min-width: 1440px) {
    .toc-container .mbtTOC {
        width: 70%;
        position: static;
        margin: 10px auto;
        box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    }
}
@media (min-width: 1680px) {
    .toc-container .mbtTOC {
        width: 70%;
        position: static;
        margin: 10px auto;
        box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
    }
}
   

Step 2: Adding JavaScript for the functioning of TOC

1. First search for </head> in blogger template again by pressing Ctrl + f ( I know that you know this😅already).

2. Then add the below JavaScript code just before the head section between the script tag that you have to write:

 

<script>//<![CDATA[ 

 Add javascript code here in between

  // ]]>

</script>

  

document.addEventListener("DOMContentLoaded", function() {
    const tocButton = document.getElementById("toc-toggle");
    const tocList = document.getElementById("toc-list");

    tocButton.addEventListener("click", function() {
        tocList.style.display = tocList.style.display === "none" ? "block" : "none";
    });

    // Generate TOC
    const headings = document.querySelectorAll("h1, h2, h3");
    let tocHTML = "";
    let h1Count = 0, h2Count = 0, h3Count = 0;
    let stopIndexing = false;

    headings.forEach((heading, index) => {
        if (stopIndexing) return;

        const level = heading.tagName.toLowerCase();
        let number = "";

        if (level === "h1") {
            h1Count++;
            h2Count = 0;
            h3Count = 0;
            number = `${h1Count}.`;
        } else if (level === "h2") {
            h2Count++;
            h3Count = 0;
            number = `${h1Count}.${h2Count}.`;
        } else if (level === "h3") {
            h3Count++;
            number = `${h1Count}.${h2Count}.${h3Count}.`;
        }

  tocHTML += `<li class="toc-${level}"><a href="#heading-${index}">${number} ${heading.innerText}</a></li>`;

  heading.id = `heading-${index}`;
        
        if (heading.innerText.trim().toLowerCase() === "conclusion") {
            stopIndexing = true;
        }
    });

    tocList.innerHTML = tocHTML;

    // Add smooth scrolling
    tocList.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
        });
    });
});

Final step: To add HTML code

1. Now open the post in which you want to add Table of contents.

2. Paste the below code at the place you want TOC to appear. 

  
<div class="toc-container">

  <div class="mbtTOC">

    <button id="toc-toggle">Table of Contents <span class="toggle-text">Show/Hide</span></button>

    <ul id="toc-list">

    </ul>

  </div>

</div>

<p></p>

<br>
  

Solution if TOC not working

In the above method, it can happen that the javascript might not work. To solve this you can directly add Javascript and CSS into the blogpost HTML of each post you want Table of Contents. Below are the pictures of this:

ADDING CSS

ADDING JAVASCRIPT (between script tags <script>//<![CDATA[ 

 Add javascript code here in between

  // ]]>

</script>)

And after that add the HTML code where ever you want. for example:

Conclusion:

This is how you add a table of contents in Blogger. Follow the steps and copy/paste the code to achieve the thing.