How To Add A Table Of Contents In A Blogger Website

If you're aiming to incorporate a table of contents into your Blogger website without sacrificing loading speed, this blog is tailor-made for you.

In this comprehensive tutorial, I'll walk you through the process of seamlessly integrating a table of contents (TOC) into your Blogger blog post using a straightforward line of HTML code. The beauty of this method lies in its minimal impact on loading speed, as it doesn't necessitate the use of any CSS or JavaScript code for the table of contents to operate.

Tabel of Content

Furthermore, I'll provide step-by-step instructions on incorporating an automatic table of contents in Blogger through the utilization of CSS and JavaScript. This way, you can choose between the manual and automatic options based on your preferences.

Before we delve into the details, if you're new to our website, consider bookmarking or subscribing to our newsletter to stay updated on forthcoming Blogger tips and tricks.

What is a table of content?

A table of contents serves as a convenient set of links or jump points, enabling readers to swiftly navigate to a particular section or heading with a single click. Its primary purpose is to accentuate key segments of the article, ultimately enhancing the overall user experience.

SEO Benefits of the table of content

When crafting extensive content spanning 2000 to 3000 words, featuring numerous headings and subheadings, grasping the article's structure can pose a challenge for readers. Given the limited attention span of users, encountering a lengthy article might prompt them to bounce back, favoring shorter, more concise alternatives.

However, introducing a table of contents at the outset of the blog post can significantly alleviate this issue. It empowers readers to navigate directly to their desired section, swiftly obtaining the information they seek. This not only enhances user experience but also addresses the modern reader's preference for succinct solutions.

Moreover, the inclusion of a table of contents yields notable SEO benefits. It aids search engine bots in comprehending the article's structure, facilitating the display of rich snippets in search results.

Absolutely, by incorporating a table of contents in your blog post, users can seamlessly navigate to specific sections directly from the search results. This not only enhances user convenience but also provides a more efficient and targeted way for individuals to access the information they are looking for without having to scroll through the entire article. It aligns with the trend of delivering concise and relevant content, catering to the preferences and limited attention spans of modern online readers.

How to add a simple table of content in Blogger blog posts. [manual method]

You've likely come across the JavaScript-based automatic table of content, which dynamically generates a table by recognizing heading tags. However, it's worth noting that this method, being JavaScript-based, has a downside—it tends to impede the loading speed of web pages. This is attributed to the requirement for multiple resources and the subsequent increase in webpage size.

To address this concern, I'll introduce an alternative approach. We'll implement a straightforward table of contents without necessitating any alterations to the coding of your Blogger theme. This method aims to maintain efficiency without compromising the loading speed of your web pages.

Creating your own table of contents on your Blogger website is a breeze – all it takes is a few adjustments to the code within the post editor using the HTML view. Simply follow these step-by-step methods to seamlessly implement your personalized table of contents.

Step 1: Initiate a new post or access an existing one where you intend to incorporate the table of contents (TOC).

Step 2: Now, transition to the HTML view, and press CTRL+F to initiate a search. Look for heading tags such as h2, h3, and so on.

Step 3: Next, include shortcodes like id="1", id="2" on the respective heading tags, following the example depicted in the screenshot below.

Step 4: Return to the Compose view, copy all the headings, and paste them in plain text, following the illustration below.

Step 5: Highlight the text of the first heading, click on the link button, type #1, and save it.

Step 6: Subsequently, replace all plain headings with links like #2, #3, and so forth, and save the changes.

Congratulations! You have successfully crafted an HTML table of contents within your Blogger blog post. Feel free to customize the table of contents heading, and you can even arrange it in a Numbered list or Bulleted list format.

After conducting a final check, proceed to publish the post, and your user-friendly "table of content" is now ready for use by your audience.👍

This straightforward method allows you to effortlessly create a table of contents on your Blogger website, especially beneficial for longer and more detailed posts.

How to add a smooth scroll effect in manual TOC

To enhance the manual table of contents we previously incorporated, you can seamlessly introduce a smooth scroll effect using a CSS file. Simply integrate the following CSS code into the theme editor, positioning it just above the ]]></b:skin> tag. Alternatively, you can paste it in the "add CSS" section of your theme customizer.

Copy the CSS code for smooth scroll effect.

/* Apply scroll margin to heading elements with IDs */
h2[id],
h3[id] {
  scroll-margin-top: 40px;
}

/* Enable smooth scrolling for the entire document */
html {
  scroll-behavior: smooth;
}

/* Disable smooth scrolling if the user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

Please be aware that the provided code is tailored for h2 and h3 tags within the page. To extend this functionality to additional tags like h4[id], h5[id], and so forth, you can include them in the CSS code above.

Should you encounter any challenges, feel free to reach out in the comment section. Alternatively, you can directly contact me on Twitter or Telegram, and I'll be more than happy to assist you throughout the learning process.

How to add Automatic Table of Content in Blogger

In this approach, you'll integrate CSS and JavaScript files into your Blogger theme. Subsequently, you'll embed shortcodes in each blog post where you desire the table of contents. While this method provides a stylish TOC, it's important to note that it may slightly impact your loading speed. Hence, my recommendation leans towards the manual HTML-based TOC for a faster and more streamlined experience.

Important Note:
Before moving forward with the following steps, ensure that your theme is compatible with jQuery and Font Awesome Icons. Many modern themes, such as Templateify themes, typically support these features. You can verify this by searching for the terms in the HTML section of your theme.

Step 1: Navigate to the theme section and click on "Edit HTML." Subsequently, paste the provided code just after the </body> tag.

<script async='async'>
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>➡️Table of Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}</script>

Step 2: Insert the following CSS code just before the provided code: `]]></b:skin>` in your theme editor.

/* Table of Contents */
.table-of-contents {
  flex: auto;
  width: fit-content;
  background: #eee;
  font-size: 14px;
  padding: 11px;
  margin: 8px 0 30px 0;
}

.table-of-contents li {
  margin: 0 0 0.25em 0;
}

.table-of-contents a {
  color: #2a5365;
  text-decoration: none; /* Optional: Remove underlines from links */
}

.table-of-contents h4 {
  margin: 0;
  cursor: pointer;
}

Step 3: Head over to the Blogger post editor, switch to HTML view, and insert the following shortcode at the desired location to incorporate the Table of Contents (TOC).

Customize CSS code in Automatic TOC

Feel free to personalize your Table of Contents further by adjusting the CSS code provided in Step 2. In the code, you'll notice color codes like #2a5365. To customize the appearance:

First, visit the website htmlcolorcodes to select your preferred color code. Replace #eee to modify the background and #2a5365 to alter the text color accordingly.

You can also enhance or decrease the text size by modifying the code font-size:14px to your desired size, such as font-size:18px, aligning it with your theme's text size.

Additionally, you have the flexibility to modify padding, margin, and other parameters to suit your preferences. Customize these elements as needed.

New Updated Automatic Table of Contents

Updated:

Here is the updated Automatic Table of contents code

 <details class="k2Toc toc">
    <summary data-hide="Hide all" data-show="Show all">Table of Contents</summary>  
    <div class="toc" id="toContent"></div>
  </details>

<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.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> 

Keep Automatic TOC Start Collapsed

If you prefer to have the Table of Contents open by default when the post is loaded in the browser, allowing users the option to later close the button to hide the list, you can achieve this by incorporating the provided code.

 <details class="k2Toc toc" open>
  <summary data-hide="Hide all" data-show="Show all">Table of Contents</summary>  
  <div class="toc" id="toContent"></div>
</details>

<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.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', () => {
  const tocElement = new TableOfContents({
    from: document.querySelector('#post-body'),
    to: document.querySelector('#toContent')
  });
  
  tocElement.generateToc();
  
  const summaryElement = document.querySelector('.k2Toc summary');
  summaryElement.addEventListener('click', () => {
    if (tocElement.tocElement.open) {
      summaryElement.textContent = summaryElement.getAttribute('data-show');
    } else {
      summaryElement.textContent = summaryElement.getAttribute('data-hide');
    }
  });
});</script>
    </b:if> 

Conclusion

Integrating a table of contents into long-form content proves highly beneficial, enhancing the overall user experience. In this guide, I've presented two methods for adding a TOC – manual and automatic. Personally, I recommend the manual TOC for its speed and efficiency, as it doesn't strain server resources and ensures a swift loading time.

If you find this guide helpful, consider sharing it with your friends. Additionally, feel free to join our Telegram Group for regular updates.

Thank you! 🤩