How To Add Automatic Table Of Content In Blogger Blog

Table of Contents widget will help to structure the article and thus facilitate its interaction with the user. In addition Table of Contents creates quick links in Google search, which increases CTR (clickability rate), in simple words the site will have more visits from search.

How the Table of Contents widget works

The proposed widget will include only those headings that are framed by the H2 tag, not as in Wikipedia. Because wiki is a huge encyclopedia and hardly anyone in the blogger will want to do such a thing, so for simplicity and convenience it is better to highlight the most important headings.
It is best to add the content table plugin for long posts with at least four headings with the H2 tag.

Features of the plugin for displaying article content

Now let's list the features of the widget:

Created in pure JavaScript - only 18 lines long
Lightweight and fast
Auto start
SEO friendly
Adds a unique identifier for each article section separately
Creates an organized list
Includes a button to display content (hide or show)
Shows the selected section
Easy to install
Mobile Responsive

How to install Table of Contents widget on blogger blog

Go to the control panel, “Theme” section.
Save a backup copy of the template just in case.
Click on the Edit HTML button
Before the closing tag </head> enter the following code:

JS
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script type="text/javascript">
//<![CDATA[
function generateTOC() {
  const content = document.getElementById("post-content");
  const headings = content.getElementsByTagName("h2");
  const toc = document.getElementById("toc-list");

  for (let i = 0; i < headings.length; i++) {
    const heading = headings[i];
    const id = "section-" + i;
    heading.setAttribute("id", id);

    const listItem = document.createElement("li");
    const link = document.createElement("a");
    link.setAttribute("href", "#" + id);
    link.textContent = heading.textContent;

    listItem.appendChild(link);
    toc.appendChild(listItem);
  }
}

function toggleTOC() {
  const toc = document.getElementById("toc-list");
  toc.style.display = (toc.style.display === "none") ? "block" : "none";
}

window.onload = generateTOC;
//]]>
</script>

Next, find the tag ]]></b:skin> and add CSS code after it:

CSS<style>
.toc-container {
  background: #f1f1f1;
  border: 1px solid #ccc;
  padding: 15px;
  margin: 30px 0;
  border-radius: 6px;
  font-family: sans-serif;
}

.toc-toggle {
  background-color: #007acc;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  margin-bottom: 10px;
}

.toc-toggle:hover {
  background-color: #005a99;
}

#toc-list {
  list-style-type: decimal;
  padding-left: 20px;
  margin: 0;
}

#toc-list li {
  margin: 5px 0;
}

#toc-list li a {
  text-decoration: none;
  color: #007acc;
}

#toc-list li a:hover {
  color: #005a99;
}
</style>

And finally the last step. Find the tag <data:post.body/> may occur several times in the template, you should replace each occurrence with the following code:

HTML<div id="post-content">
  <data:post.body/>
</div>

Now save the settings.

Activation of “article content” widget in posts

It's best to add the widget after the first paragraph of the article (open post and switch editor to HTML), or just add the code to the sidebar like a regular HTML gadget:

HTML<div class="toc-container">
  <button onclick="toggleTOC()" class="toc-toggle">
    <i class="fa fa-list-ul"></i> Table of content
  </button>
  <ol id="toc-list"></ol>
</div>

Now publish the article and enjoy the result.