How to Add Table of Contents in Blogger [ 2023 / Automatic ]

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.
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?
STEP 1:-Blogger Dashboard Login
STEP 2:- Go To Theme and Edit Html
STEP 3:- Find (Search) </head>
<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>
.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
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.