How to add Automatic Table Of Content in Blogger Website For Free using JavaScript

Hello Friends, I hope you all are doing good. Are you looking for a Automatic Table of Content ( Auto ToC ) in Blogger but don’t want to decrease the Loading Speed of Site then This Post is for you only.

In this Post, I will guide you How to Add a Automatic Table of Content By Adding Some Simple Code on your Blog.

Auto Table Of Content in Blogger Website

What is Table of Content ?

A table of contents is basically exactly a quick link or a jump link that allows readers to quickly jump to a specific section or heading with a single click. It highlights the most important part of the article to improve the user experience.

What are SEO Benefits of Table of Content ?

When you write long-form content of 2000 to 3000 words with various different headings and subheadings, the user will find it difficult to understand the structure of the article.

Readers’ response times are very short, and if they find a long-form article, they will bounce back and prefer a short-form article with a precise solution. However, if you include a table of contents at the beginning of the blog post, they will be able to skip to the section and get the information they require.

There are several SEO advantages to including a table of contents on your website. It supports search engine bots in understanding the article and displays rich snippets in search results.

As a result, the user can directly skip to a specific section of the blog post within the search result.

Steps to Add Automatic Table of Content in Blogger

Note :- Before Adding the Table of Content in your Blog, Your Blog Theme Should Support jQuery and Font Awesome Icons. Most of The New Blogger Theme Support The jQuery and Font Awesome Icons i,e. Templateify

Step 1 :- Login In Blogger Dashboard and Go To Theme Section

Step 2 :- Click on “Arrow” Button Near to Customize Button

Step 3 :- Click on “Edit HTML”

Step 4 :- Search the Code </body> and Paste the Code Below it.

<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 5 :- Search the Code ]]></b:skin> and Paste the CSS Code Just Above the Code.

/* TOC */.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}.table-of-contents h4{margin:0;cursor:pointer}

Step 6 :- Now go to Blogger Post Editor and Click on Or Switch to “HTML View” and Paste the Below Table of Content Shortcode Where you want to Add Table of Content.

<div class='toc-pro'></div>

Now Paste the Shortcode On Every Post Where you Want to Add the Automatic Table of Content.

Customization of CSS Code of Table of Content

You can Customise your Table of Content By Changing Some CSS Code Given Above in the Step 5.

Colour Changing

First Go to The Site HTML Colour Code and Pick Up the Colour Code Which you want.

Find and Change the Code #eee to Change the Background Colour.

Find and Change the Code #2a5365 to Change the Text Colour.

Text Size Customisation 

You can Increase the Text Size By Finding the Code font-size:14px and Change the 14px According to Your Blog Text Size.

Padding Customisation 

You can Increase the Padding Size By Finding the Code padding:11px and Change the 11px According to Your Need.

Conclusion

In this post I shared you " How to Add Automatic Table of Content in Blogger using JavaScript ". I hope that you like my post. Please visit our site daily for more new posts. Thankyou for visiting our site.

Our All Posts Are Protected By DMCA. So Don’t Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.

Go to Link