Add Automatic Table of Content in Blogger,ब्लॉगर में औटोमैटिक सामग्री की तालिका (TOC) कैसे बनाये - Khatihelper

 

Hey bloggers, welcome to your own blog www.khatihelper.blogspot.com in last post  i told you that How to rank your post on Google first page in 2022 .
many bloggers had commented on this post that there are An automatic and easy plugin  setup available on WORDPRESS but,there no any plugins available like Wordpress on Blogger so, in this article i will reach you How You can add Table of Content in Blogspot/blogger in just two steps or How to add Table of Content in Blogspot.
So ,without wasting anymore time lets start guys...

What is T.O.C. [Table of Content ]-

There are the another main thing is that you should definitely use a table of content widget .for that wordpress users can get it download automatically from plugin menue but for blogger there are no plugins avilable for that So ,you have to add it manually. And I hope you understand the TOC importance For blogger

How to add T.O.C-

In Blogger, you can add Automatic Table of Content in a step-by-step tutorial  as mentioned below.

Step 1: First you have to go to blogger.com and then go to  theme section and tap on Edit HTML and search the </body> tag and paste the  given code  below </body> tag .

How to search tags in Mobile
(Kindly add keyboard in your phone via OTG CABLE and press ctrl+F now search bar will be opened)

<script async="async" defer="defer"> var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>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 2:   Now Search the code

]]></b:skin> in your HTML theme and paste the following code before ]]></b:skin>.

.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} .table-of-contents h4:before{font-family:FontAwesome;content:"\f0c9";padding-right:7px;}

 3: now 99% setup is completed now just we have to add T.O.C table of content in our posts/articles for that you have to simply open you post edit menue and click on edit html view and paste the below code anywhere you want to display T.O.C (table of content ) .

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

Now , your brand new T.O.C is activated .Now, you are ready to fly in the sky .best of luck my diamonds .