How to Add Table of Contents in Blogger

April 02, 2022 By / Leave a Comment
How to Add Table of Contents in Blogger

Table of Contents formerly known as TOC is used in a blog post to make it easy to navigate that post. In WordPress, It is very easy to add a table of contents in a post using a plugin. But when it comes to Blogger, It doesn't support any plugin like WordPress. However, we can add Table of Contents in Blogger without any plugin. In this post, I will demonstrate the steps you will need to add TOC in BlogSpot post.

What is a Table of Contents?

A Table of Contents or TOC is a list of all the headings and sub-headings of a post or article in a tabular format. Usually, It is seen at the top of a post or article.

What is an Automatic Table of Contents?

An automated Table of Contents makes it easy for you to add a TOC to your blog post. TOC is nothing more than a complete list of your post's headings and sub-headings. An automated TOC arranges this list automatically which means you don't need to write any codes for a table of contents. You just need to put a shortcode on whether you want to show this list.

Jettheme Premium Blogger Template Free Download

Advantages of using Table of Contents

Table of Contents or TOC appears at the top of a post which means readers can easily navigate to that post. If you've ever visited Wikipedia, you know that there is a table of contents at the top of almost every page. It helps you to find out a particular topic on that page.

A TOC is shown for readers so they can easily navigate on that page without wasting time. Readers love the table of contents because it helps them a lot. That's why it is very important to have a TOC in your blog post.

Here are some key benefits of using a Table of Contents in your Blogspot post:

  • Having a Table of Contents make your post more professional
  • Readers won't get bored with your blog post
  • Arrange your post's topic in a systematic way
  • An audience can easily navigate to your post
  • Helps to increase your blog's user experience

How Table of Contents Improve Blog SEO?

TOC can help you to improve your page ranking in SERPs. Almost every search engine especially Google show jump links to a blog page in SERPs. A long article can rank better in search engines. Also, a long article has many headings and sub-headings with different aspects on the same topic. Google also considers longer posts as their ranking techniques. So, it is easy to rank in Google with a long post or article. A Table of Contents also helps to increase the Click-Through-Rate (CTR) of your site.

Fletro Pro Blogger Template Latest Version

Can TOC Improve User Experience?

Page user experience is also an important part of your site. Unfortunately, many Bloggers don't care about their page user experience. If your page has a good user experience then it's easy to rank in search engines.

Automatic Table of Contents helps you to increase your site user experience. About 80% of readers want to read the important points only. So, If your page has a table of contents, your reader will easily navigate to their desired part. You should not show a table of contents if your article is too short.

Key Features Of This Automated TOC

  • Code is written with HTML, CSS and JS
  • Designed with modern technology
  • Very lightweight and won't affect your average page load time
  • Highly SEO Optimized and will help you to rank in SERPs
  • Has a toggle button to hide/show TOC
  • Very responsive and easy to customization

Note - Please make a backup of your existing template before making any changes to your template so that you can restore your original template if something goes wrong.

How To Add Table Of Contents In Blogger?

  1. First, Sign In to your Blogger dashboard
  2. Go to "Theme" and click on the "Arrow Icon" then Click on "EDIT HTML"
  3. Now search for the </body> and paste the below script just above the </body> tag
    4. <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 search ]]></b:skin> and paste the following CSS code just above ]]></b:skin> line
    5. 
  /* 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)}
  5. Finally, search for the <data:post.body/> and replace it with the below code
    6. <div id='postBody'><data:post.body/></div>
  6. Now save your template.

Best Responsive Premium Blogger Templates

How To Show Table Of Contents In Blog Post?

To show the table of contents in your blog post or article, you need to put a small HTML code in your post. To add the below HTML code in your post, go to HTML mode while you are writing a post and paste the below code just after the para 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>

To active the TOC plugin paste the below Javascript code after the end of your post. Hit the Publish Button and Boom! TOC has been generated successfully

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

Final Thoughts

Remember, without an SEO-friendly article you cannot rank in search engines by just showing a table of contents in your blog post. Hope this post helps you to implement TOC in your blog post. In this post, you learned how to add table of contents in Blogger and you can go for how to add HTML Sitemap page in Blogger. Finally, If you face any error with this code then please leave a comment below and I would love to help you.

Leave a Comment

Add Comment
comment url