How To Add Table Of Contents [TOC] In Blogger Post [Automatic Table Code]

Today we will know how to add a Table of Content to a Blog Post or Website. You can read the complete information in this Hindi.

A table of contents is very important for a Blog Post/Website, it helps you in doing Search Engine Optimization (SEO).

If you put a Table of Content on your website then there will be more chance of getting your article's post rank, whereas on WordPress it is also a Table of Content and it is very easy to install it on WordPress, just have to install a plugin and your work is done. will go.

But it is a bit difficult to add a Table of Content on Blogger but you do not need to worry at all, I am going to give you complete information in detail.

Table of Content (toc)

What are Tables of Contents?

Whenever we visit any big website, we must have seen that all the Headings and Sub Headings in the Post / Article appear in the same place.

This has the advantage that by clicking on the heading that you want to know about, you will reach that paragraph.

Due to the Table of Content, the visitor does not have to read the big post/article, adding a Table of Content to the blog makes your website or blog post User Friendly.

How To Add Table Of Contents In Blogger Post?

To add a Table of Content to Blogger's Blog Post/Website, you will have to add some Html Code to the blog.

Table Of Content Html Code For Bloggers   To know where to add and which are, you have to understand Step by Step.

STEP 1:-Blogger Dashboard Login

First of all, go to Blogger's Dashboard.

STEP 2:- Go To Theme and Edit Html

Now you have to go to the Theme's option and then click on Edit Html.

STEP 3:- Find (Search) </head>

Now you have to find it  </head>  and copy the Html Code given below and paste it over it.

1.Html Code Copy

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><script type='text/javascript'> //<![CDATA[ //*************Table of Content (TOC) plugin by earningbestway function avsTOC() {var avsTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);avsTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("avsTOC").innerHTML += avsTOC;}}function avsToggle() {var avs = document.getElementById('avsTOC');if (avs .style.display === 'none') {avs .style.display = 'block';} else {avs .style.display = 'none';}} //]]></script>

STEP 4:- Find (Search)  ]]></b:skin>

Now you have to find it  ]]></b:skin> (Find)  and paste the Html Code given below on its  ]]></b:skin> 

2.Html Code Copy

.avsTOC{border:1px solid #999999; box-shadow:0px 0px 0 #EDE396; background-color:#f3f3f3; color:#707037; line-height:1.4em; margin:30px auto; padding:20px 30px 20px 10px; font-family:oswald, arial;display: block; width: 70%;} .avsTOC ol,.avsTOC ul {margin:0;padding:0;} .avsTOC ul {list-style:none;} .avsTOC ol li,.avsTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;} .avsTOC a{color:#6fa8dc;text-decoration:none;} .avsTOC a:hover{text-decoration:underline; } .avsTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px; position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;} .avsTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

STEP 5:- Replace This Code <data:post.body/>

Now you have to find  <data:post.body/>  (Find)  and replace it with < data:post.body/> with the Html Code given below.

3.Html Code Copy

<div id="post-toc"><data:post.body/></div>

STEP 6:- Save The Theme

Now after pasting all three Html Codes, save it.

STEP 7:- Html Code Add-In Post/Article

Now where you want to put the Table of Content, you have to paste this Html Code given below in your Post / Article.


4.Html Code Copy

<div class="avsTOC"> <button onclick="avsToggle()">Contents</button> <ol id="avsTOC"></ol> </div>

STEP 8:- Add Html Code At the End Of The Post

Now you have to paste this Html Code in the last.


5.Html Code Copy

<script>avsTOC();</script></div>


Note:  You have to add 1,2,3 Html Code only once and you have to add Code Number 4,5 in all your Posts/Articles.

Conclusion:-

How do you put this information on the Table of Content in the blog? How did you like it, do tell us by commenting, and if you want more such Interesting Helping Full Content, then you can visit our website again.