How to add Automatic Table Of Contents In Blogger

How to add Automatic Table Of Contents In Blogger

There are many plugins available to add a table of contents to posts on WordPress, with the help of which you can easily create a table of contents, but on the Blogger platform, you have to use HTML to create TOC.

Read More: How to Settings Custom Robots Header Tags In Blogger

To create a table of contents, you do not need a lot of knowledge of HTML, even if you know a few basics, you can easily add a table of contents to your posts. Just a little bit of HTML comes to every blogger.

What is Table of Contents

The table of contents is a structured overview of any post, in which all the headings and subheadings (h1, h2, h3, h4) of the post are given in the form of links, with the help of which the readers get an idea of ​​what is in that post. -What topics are covered and with the help of those links he can easily navigate the full post.

You will definitely get a table of contents at the beginning of most of the articles in Wikipedia because it gives a good user experience to the readers and apart from this the table of contents also improves the SEO of your blog.

Google also shows jump links to the table of contents present in any post in its search results pages so that any visitor can click on that link and reach that specific section of the direct post. Apart from this, there are many advantages of using TOC in posts.

Benefits of Table of Contents

There are many benefits of putting a Table of Contents in your blog, as you must have noticed that whenever you search for something, then Wikipedia’s website must have come up very often in your search results as well. 

That’s why every blogger must use a Table of Contents in his blog, whether it is on Blog Blogger or WordPress. Now friends, let’s know about some more benefits of the Table of Contents.

  • This helps a lot in improving the SEO of your blog, due to which your blog post can come to the top positions in the search ranking.
  • Table of Contents greatly improves the navigation and user experience of your blog.
  • In the absence of time, with the help of the Users Table of Contents, users can directly go to the topic about which they want to know.
  • Because of this, Google’s Crawlers also find it easy to understand and crawl your blog, so that your blog posts are quickly indexed in Google.
  • It also greatly improves the UI Design of your blog.

How to Add Table of Contents in Blogger

Now I am just telling you the steps and after that, I will explain all the steps one by one.

  1. Log In to Blogger Account
  2. Go To Theme
  3. Go To Edit HTML
  4. Add Code in <Head> Section.
  5. Add Code in ]]></b:skin> Section
  6. Replace Code in Body
  7. Add Code in Post & Article
  8. Last Code End of the Posts

Step:1 – Log In to Blogger Account

Table of Contents

Step:2 – Go To Theme

Blogger Theme

Step:3 – Go To Edit HTML

Blogger Edit HTML

Step:4 – Add Code in <Head> Section.

Blogger paste code Below header 1024x378 1

Copy The Below Code

<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 codebarta.com
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:5 – Add Code in ]]></b:skin> Section

Next, Search for ]]></b:skin> Code and Paste Below CSS Code before ]]></b:skin>, Just like below Image

Blogger Bskin 696x364 1

Copy The Below Code

.avsTOC{border:5px solid #EE5535;
box-shadow:1px 1px 0 #EDE396;
background-color:#FFFFE0;
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:#EE5535;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:6 – Replace Code

Now, Search for <data:post.body/> and replace it with the code below

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

Step:7 – Add Code in Post & Article

Now you have to add a Table of Contents to your post and where you have to put your Table of Contents code.

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

Step:8 – Last Code End of the Posts

Now you have to take a code and put it at the end of the post i.e. last. And code is given below.

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

We have told you all the steps, with the help of which you can easily add a Table of Contents to your Blogger’s website and blog. I feel that you must have understood this, if you do not understand anything, then tell by commenting Niche.

Leave a Comment