Hello Friends, Today we will learn "how to put a table of content in our blog post" in this postIf you are a blogger, then you should know what is Table of Content. so, Today we will know what is the table of content? What are its benefits? And how to implement it in your blog?


 How to Add Automatically Table of Contents in Blogger Posts- Tips & Tricks [2020]

If we add the table of content to our post, then our blog gets a lot of benefit from it. Also, the visitors coming to our blog also get a lot of help. If we put a table of content at the beginning of all our posts, whether a long post or short post, then the readers will know which topic has been covered in the post. By adding a table of content, you can get more traffic to your website.


What is Table of Contents (TOC)?

The Table of Content is a summarized overview of all the topics covered in a post. Table of Content is also called TOC in short. The form of links in the list shows all Headings and Subheadings (H1, H2, H3, H4) used in the TOC. This helps the readers reading the post to know which topics have been covered in that post.

If we understand the Table of Contents by example, then you must have read many books. And if you are not fond of reading books, you must still read during school time. At the beginning of all books, there is an index page, in which books or topics are there in that book, and in which page is it easily known. And with the help of an index, which we have to read, we easily reach the page of that chapter. Let me tell you, the index itself is called Table of Content.

With the help of TOC, we can easily navigate to any post. By looking at the topics given in it, we can easily find out whether this post is of our users or not. With the help of TOC, the topic we want to read in the post can go directly to that topic. This also improves the SEO of your blogAnd readers get a good user experience.



Advantages of Table of Contents (TOC)?

You must have seen the table of content in all popular and big websites or blog posts. For example, Table and Content can be seen in all posts and pages of Wikipedia. Why do they put TOC in their posts? Because it has many benefits. Let us know what its benefits are.

● This leads to the SEO improvement of the blog.
● Ranking of Search Engine also has advantages.
● In search engines, rank titles as well as headings and subheadings.
● The article can be navigated easily.
● With the help of TOC, the topic you want to read in the post can go directly to that topic.
● Readers make articles simple and easy to read.
● Gives Readers a good User Experience.
● Articles look more professional and attractive than its structure overview.



Where to put Table of Contents in the post?

The table of content is very important for long posts. You must have read a long article (3000 - 4000) words on the Internet. It also takes time to read such a long post. In such a post, there are many points in which we already know, but still, we have to read the post completely because it does not have a table of contents. If the post contains the table of content, then we can directly read the point we have to read.

In such a situation, if you also want to put the table of content in your blog post, then a big question arises that where should it be placed in the post? By the way, TOC is placed at the beginning of the post. You can apply it after the first paragraph of your post. Also, in the post, you must use it as a photo thumbnail. So you can add TOC below that photo as well.



How to add Table of Contents (TOC) in Blogger Post?

To add a table of content to Blogger, you need to do that in HTML. For this, you do not need too much knowledge of HTML. If you also know a little basic of Html, then you can easily add a table of content to your blog post.

Apart from this, if you do not know HTML at all, then it does not matter. If you read this post well and follow the steps mentioned, you can easily add TOC to your blog post. And if after that there is an issue or error, then you can ask us through a comment. We will definitely solve all your problems, issues, and errors. So let's know how to add TOC to our blog post.


Step - 1
● First, you have to log in to Blogger.
● After that go to Theme.
● After going to Theme, you have to first backup your theme and download it on your systemSo that if any mistake happens then it can be fixed by a backup.
● Then click on the Edit Theme.

 How to Add Automatically Table of Contents in Blogger Posts- Tips & Tricks [2020]

Steps - 2
● Now the HTML Editor Box will open in front of youClick anywhere inside this box and type CTRL + F from the keyboard.
● Now inside the search box you have to search ]]> </b: skin> .
● Now you have to copy the code given below.
● and ]]> </b: skin> paste it over.


/* TOC by bloggingtricks.in (Table Of Contents) */
.table-of-contents{flex:auto;width:fit-content;background:#fafafa;font-size:14px;padding:11px;margin:8px 0 30px 0;border:1px solid #eee}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color:#2a5365}
.table-of-contents h4{margin:0;cursor:pointer}
.table-of-contents h4:before{font-family:FontAwesome;content:"\f0dc";padding-right:7px;}
Steps - 3
● Now you have to search again inside the HTML Editor Box. For which you have to type CTRL + F from your keyboard.
● Now to search here - </body> .
● After searching </body> you have to copy the code given below.
● and paste it over </body> . You can also understand by looking at the screenshot below.



<script async='async' defer='defer'>
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>
● After that, you have to save your edited theme by clicking on Save Theme.
Steps - 4
Now you have set up a table of contents on your blog. Now it comes to implement it. To add Table of Content to all your posts, you will have to manually paste a small HTML code in each post. If 400 - 500 posts have been written on your blog, then going to all the posts and pasting the code will be less of a challenge.

 Read More 
●  
What is On-Page SEO - Full SEO Guide For beginners [2020]
  What is SEO in Digital Marketing And How Does It Work-Complete Details

But you have to do this even if it takes 2 to 3 days. Or you can just add the table of content to your new post while publishing it. And whenever you get time, then you should update in the old post. Now follow the steps TOC described below to add your post to: -

● To make this happen, you'll have to open the post, which you want to add to the TOC.
● Then go to the HTML section of the post.
● given below then HTML Code Copy it.
● and post where you want to add TOC, the address on the Paste turn.

<div class='toc-pro'>
</div>
So in this way you can easily add Table of Contents (TOC) to every post in your blog. You just have to follow all the steps mentioned above thoroughly. These are the setup of Automatic Table of Contents, in which all you have to do is paste this little HTML code on your post, where you want to put TOC. After that, any number of Headings and Subheadings (H1, H2, H3, H4, H5) in your post will start showing in the Automatic Table of Contents.


Conclusion

So friends, now you must have known that "How to Add Automatically Table of Contents in Blogger Posts " By following the steps mentioned above, you can easily put a table of content (TOC) in all the posts in your blogger blog. I hope you liked the post. And you have understood all the things I have said. If you still have any questions, you can ask us by commenting. If you liked the post, please share this post with all your friends on social media. Apart from this, you can get information about all new posts continuously by following us.

Thank You...!
Previous Post Next Post