How to add Table of Content To a Blogger Website Using Html
How to add Table of Content To a Blogger Website Using Html
Introduction:
What is Table of Content Website?
A table of contents helps your visitor find it easy to jump to a specific headline or headline while navigation through your blog post.
Table of Contents
The image above is an example of a table of contents. This is an automatic table of content generator.
Benefits of Table of Content.
When your content is in long form, around 2000 to 3000 words with a lot of headings and subheadings. It sometimes becomes difficult for a user to understand your article.
As you already know, the span of readers is very low. They sometimes prefer short articles to long articles. So adding a table of content helps them to jump to their desired heading or subheading.
How to add Automatic Table Of Content to Your Blogger website
Step 1: Go to Blogger, Click on theme and Edit the HTML code of your blogger website and search for ]]> </b:skin>
Step 2: Just paste the below code right after it and click on save to save the code. Now go to your post section
<b:if cond="data:view.isPost">
<style>
html{scroll-behavior:smooth;overflow-x:hidden}
details summary{list-style:none;outline:none} 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(95% - 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.trim().toLowerCase().replace(/[^ws-]+/g, "").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('#postBody'),
to: document.querySelector('#toContent')
}).generateToc()
);</script>
</b:if> STEP 3: On your post, Click and edit the post you want to add the table of content. On the top left corner, click on the pencil icon to switch from compose view to HTML view. At your desire location, just past the code blow there and click on save
<details class="k2Toc toc">
<summary data-hide="Hide all" data-show="Show all">Table of Contents</summary>
<div class="toc" id="toContent"></div>
</details>Now you have to go to view post section and your table of Content will appear automatically
Note: You need to highlight and indicate the heading and subheading of the post before it will appear. If you need any help, do not hesitate to use the contact button below and above
Post a Comment