How to Add Table of Contents in Blogger

Table of Contents (TOC) is a valuable tool that enhances the navigation experience for readers within a blog post. While WordPress offers plugins for easily creating TOCs, Blogger doesn't provide such a feature out of the box. However, you can add a Table of Contents in Blogger without the need for plugins. In this tutorial, we'll guide you through the steps to integrate a TOC into your BlogSpot posts.

What is a Table of Contents?

A Table of Contents, often referred to as TOC, is a list of all the headings and sub-headings within a blog post or article, presented in a tabular format. Typically, it appears at the top of a post, providing readers with an organized overview of the content's structure.

Advantages of Using Table of Contents

A Table of Contents positioned at the beginning of a blog post offers several benefits to both bloggers and readers:

• Enhances the overall look and feel of your post.
• Keeps readers engaged and interested.
• Organizes your post's topics systematically.
• Allows your audience to easily navigate your post.
• Improve your blog's user experience.

Key Features

This automated Table of Contents is designed to meet your needs effectively:

• Composed of HTML, CSS, and JS.
• Features a contemporary look.
• Doesn't impact page load times.
• SEO optimized for better ranking.
• Provides an option to hide/show the TOC.

NBefore making any changes to your template, be sure to back up your existing template to restore it in case of any issues.[alertdanger]

How To Add Table Of Contents In Blogger?

Follow these steps to integrate a Table of Contents into your Blogger template:

1. Sign In to your Blogger dashboard.


2. Go to "Theme" > then select "EDIT HTML".


3. Search for </body> and paste the script just above the </body> tag.



<script>/*<![CDATA[*/ /* Table of Content, Credit: blustemy.io/creating-a-table-of-contents-in-javascript */ class TableOfContents { constructor({ from, to }) { this.fromElement = from; this.toElement = to; this.headingElements = this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6"); this.tocElement = document.createElement("div"); }; getMostImportantHeadingLevel() { let mostImportantHeadingLevel = 6; for (let i = 0; i < this.headingElements.length; i++) { let headingLevel = TableOfContents.getHeadingLevel(this.headingElements[i]); mostImportantHeadingLevel = (headingLevel < mostImportantHeadingLevel) ? headingLevel : mostImportantHeadingLevel; } return mostImportantHeadingLevel; }; static generateId(headingElement) { return headingElement.textContent.replace(/\s+/g, "_"); }; static getHeadingLevel(headingElement) { switch (headingElement.tagName.toLowerCase()) { case "h1": return 1; case "h2": return 2; case "h3": return 3; case "h4": return 4; case "h5": return 5; case "h6": return 6; default: return 1; } }; generateToc() { let currentLevel = this.getMostImportantHeadingLevel() - 1, currentElement = this.tocElement; for (let i = 0; i < this.headingElements.length; i++) { let headingElement = this.headingElements[i], headingLevel = TableOfContents.getHeadingLevel(headingElement), headingLevelDifference = headingLevel - currentLevel, linkElement = document.createElement("a"); if (!headingElement.id) { headingElement.id = TableOfContents.generateId(headingElement); } linkElement.href = `#${headingElement.id}`; linkElement.textContent = headingElement.textContent; if (headingLevelDifference > 0) { for (let j = 0; j < headingLevelDifference; j++) { let listElement = document.createElement("ol"), listItemElement = document.createElement("li"); listElement.appendChild(listItemElement); currentElement.appendChild(listElement); currentElement = listItemElement; } currentElement.appendChild(linkElement); } else { for (let j = 0; j < -headingLevelDifference; j++) { currentElement = currentElement.parentNode.parentNode; } let listItemElement = document.createElement("li"); listItemElement.appendChild(linkElement); currentElement.parentNode.appendChild(listItemElement); currentElement = listItemElement; } currentLevel = headingLevel; } this.toElement.appendChild(this.tocElement.firstChild); } } /*]]>*/</script>[codeblock]



4. Locate ]]></b:skin> and paste the CSS code just above this line.



/* Table of Contents by wikipoka.com */ .pS details summary{list-style:none;outline:none} .pS details summary::-webkit-details-marker{display:none} details.sp{padding:20px 15px} details.sp summary{display:flex;justify-content:space-between;align-items:baseline} details.sp summary::after{content:attr(data-show);font-size:12px; opacity:.7;cursor:pointer} details.sp[open] summary::after{content:attr(data-hide)} details.toc a:hover{text-decoration:underline} details.toc a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; color:inherit} details.toc ol{list-style:none;padding:0;margin:0; line-height:1.6em; counter-reset:toc-count} details.toc ol ol ol ol{display:none} details.toc ol ol, .tocIn li:not(:last-child){margin-bottom:5px} details.toc li li:first-child{margin-top:5px} details.toc li{display:flex;flex-wrap:wrap; justify-content:flex-end} details.toc li::before{flex:0 0 23px; content:counters(toc-count,'.')'. ';counter-increment:toc-count} details.toc li a{flex:1 0 calc(100% - 23px)} details.toc li li::before{flex:0 0 28px; content:counters(toc-count,'.')} details.toc li li a{flex:1 0 calc(100% - 28px)} details.toc li li li::before{flex:0 0 45px} details.toc li li li a{flex:1 0 calc(100% - 45px)} details.toc .toC >ol{margin-top:1em} details.toc .toC >ol >li >ol{flex:0 0 calc(100% - 23px)} details.toc .toC >ol >li >ol ol{flex:0 0 calc(100% - 28px)} details.toc .toC >ol >li >ol ol ol{flex:0 0 calc(100% - 45px)}[codeblock]



5. Finally, search for <data:post.body/> and replace it with the below code:



<div id='postBody'><data:post.body/></div>[codeblock]



6. Save the changes.

How To Show Table Of Contents In Blog Post?

To display the Table of Contents in your blog post or article, follow these steps:

1. While writing a post, switch to HTML mode.


2. Paste the following HTML code just after the paragraph where you want to show the TOC.



<details class='sp toc'> <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary> <div class='toC' id='toContent'></div> </details>[codeblock]



3. To activate the TOC plugin, paste the following JavaScript code after the end of your post.



<!--[ Script to activate ToC ]--> <script>document.addEventListener('DOMContentLoaded', () => new TableOfContents({ from: document.querySelector('#postBody'), to: document.querySelector('#toContent') }).generateToc() );</script>[codeblock]



4. Finally, publish or update your post.

That's it!

You have successfully added table of contents on your post.

Final Thoughts

Keep in mind that simply adding a Table of Contents is not enough to boost your search engine rankings; you must also create SEO-friendly content. We hope this guide has helped you implement a TOC in your Blogger posts. If you encounter any issues with the provided code, please leave a comment below, and we'll be happy to assist you.