How to Add Automatic Table of Content in Blogger | Latest Automatic Table of Content in Blogger

Hi to all, here I am going to tell you all about how to add latest automatic table of contents in your blogger website easily in just few minutes.

Learn how can add an automatic table of contents to your blogger website. Just follow the below steps and setup the code as mentioned below.

Here you need to add the CSS and JavaScript code in the theme file and then add the HTML code in the blog post to generate the Table of Contents (TOC).

You need to change the Post Body Id according to your theme, otherwise this code may not work in some cases.

Introduction

What is Table of Content ?

It is basically a quick link or jump link, helps the readers to skip to a specific part or heading with a single click.

Benefits of adding the table of content ?

When you writing long post nearly 2000 to 4000 words with multiple headings and sub headings, it will become difficult for the visitor to get clear understand the structure of the post.

You should know that if you written long article then the users attention might be low and f they found that the post is long then they bounce back to your post , but if your add table of contents in your post then at the beginning of the post they will jump to the section and read the required information and then if they found good content then they will read complete post.

There are so many SEO benefits by adding the table of contents in the blog post, it helps search engine crawlers to better understand about your article and displays rich snippets in the search results.

So read the article carefully and completely, if you miss any one step then you will get error while saving the code in your theme editor, so read the article completely.

Demo of automatic table of Contents

Step to Add Latest Table of Contents in Blogger Website

Step-1: First of all you need to login to your blogger website dashboard by using your login credentials.

Step-2:  Click on Theme section -> Click on Arrow Icon -> Click on Back up -> click on Download Theme.

Step-3: Click on Theme Section -> Click on Arrow Icon -> Click on Edit HTML -> Blogger Theme Editor.

Step-4: Copy the below provided CSS and JavaScript code.

<!-- Automatic Table of Contents Code Starts --> <b:if cond="data:view.isPost"> <style> html{scroll-behavior:smooth;overflow-x:hidden} .pS details summary{list-style:none;outline:none} .pS details summary::-webkit-details-marker{display:none} details.k2Toc{padding: 10px 15px;background: #f3f3f3;color: black;font-weight: 600;margin: 10px 0px; border:2px solid; border-radius: 5px;box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;} details.k2Toc summary{display:flex;justify-content:space-between;align-items:baseline} details.k2Toc summary::after{content:attr(data-show);font-size:12px; opacity:.7;cursor:pointer} details.k2Toc[open] summary::after{content:attr(data-hide)} details.toc a:hover{text-decoration: none; color: #fe6c6c;}details.toc a:active{text-decoration: none; color: #fe6c6c;}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% - 45px)} details.toc .toc >ol >li >ol ol ol{flex:0 0 calc(100% - 35px)} </style> <script>/*<![CDATA[*/ /* Table of Contents */ 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> <script>document.addEventListener('DOMContentLoaded', () => new TableOfContents({ from: document.querySelector('#post-body'), to: document.querySelector('#toContent') }).generateToc() );</script> </b:if> <!-- Automatic Table of Contents Code Ends -->
Copy

Step-5: Now paste the copied CSS and JavaScript Code above closing body tag or </body> tag.

Step-6: After adding the script, click on save button.

Step-7: Now you need to come back to blogger dashboard and then open the post where you need to add automatic table of content.

Step-8: Now copy the below provided code.

<!-- Automatic Table of Contents Code Starts --> <details class="k2Toc toc"> <summary data-hide="Hide all" data-show="Show all">Table of Contents</summary> <div class="toc" id="toContent"></div> </details> <!-- Automatic Table of Contents Code Ends -->
Copy

Step-9: Now go to dashboard -> Select Post to add TOC -> Click on Pencil icon -> Click on HTML View.

Step -10: Paste the copied code in the post i.e. you can add the code in any part of the blog post to show the table of content box in your post section.

Step-11: Click on update button.

Step-12: You have successfully added the latest automatic table of contents in your blogger website easily in just few minutes.

Note:

Basically to generate the table of content in the blog post, you need to add the code given in step-8 and need to paste the code in every blog post, where you want to add the table of content.

Here one thing to note that, if the table of content is not working then you need to change your post id.

You will get post by clicking on inspect element here you can see your post id and it is case sensitive.

In case of fletro pro or Medium ui theme the post id is id="postBody" and in other themes id may be id="post-body" and post id may differ based on the theme you are using.

After finding the post id you need to go to theme editor and search for closing body tag and search for query selector in the code pasted and replace the post with your theme post id carefully for example ( "#postBody" or "#post-body" etc.) and click on save button.

You can also further customize the table of content according to look and feel of your website by modifying the CSS code.

Conclusion

I hope that you have understood about how to add latest automatic table of content in your blogger website easily in just few minutes.