How to Add Table of Contents in Blogspot Posts – Table of Contents or TOC is used in blog posts to make it easier to navigate that post. In WordPress itself, it's very easy to add a table of contents in a post using a plugin.
But if on Blogger it's another story, because this one blogging platform doesn't support any plugins like WordPress. However, you can still add the Table of Contents feature in your Blogger posts without any plugins.
In this article, Onghax will show you the steps you need to add a Table of Contents to your Blogspot posts.
How to Add a Table of Contents on Blogger
1. First, Login to your Blogger dashboard
2. Go to “ Theme ” and click “ Arrow Icon ” then click “ EDIT HTML ”
3. Now look for the code </body> and paste the script below right 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>
4. Now find the code ]]></b:skin> and paste the following CSS code just above the line ]]></b:skin>
/* Table of Contents by onghax.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)}
5. Then, look for the code <data:post.body/> and replace it with the code below.
<div id='postBody'><data:post.body/></div>
6. Finally, Save your template.
How To Display Table Of Contents In Blog Posts
For how to display a table of contents in your blog post or article, you need to enter a little HTML code in your post.
To add the HTML code below to your post, open HTML mode while you're writing a post and paste the code below right after the para where you want the TOC to appear.
<details class='sp toc'> <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary> <div class='toC' id='toContent'></div> </details>
To activate the TOC plugin, paste the Javascript code below 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>
Press the Publish Button and the Automatic TOC has been created successfully.
Conclusion
Remember, without SEO-friendly articles you cannot rank in search engines just by displaying a table of contents in your blog posts.
Hope this post helps you implement TOC in your blog posts. If you face any error with this code, please leave a comment below and we will be happy to help you.
Post a Comment for "How to Add Table of Contents in Blogspot Posts"