How to Add Table of Content in Blogger Step by Step


Do you want to add a Table of Content in your Blogger website ? if yes then you are at the right place. If you are a WordPress user then you can easily add a Table of Content with the help of plugins in your blog. But unfortunately there are no plugins for your Blogger website. You have to change your Blogger website HTML and CSS coding. 

You will be quite surprised, how can I add Table of Content in Blogger Website because I don't know coding. But believe me you can add a Table of Content in your Blogger Website very easily, no matter if you are a beginner or not. Today I am going to tell you, How to Add a Table of Content in Blogger Website in just a few simple steps.


Benefit the Table of Content

When you use Table of Content in your Blog or Website, it is quite easy for users to access any part of your article. It increases user experience and it also helps Google to understand and shows your content in the right place of the SERP area. 

Read Also:


What is Table of Content

When you give headings in any particular blog post, Table of Content links all your headings in one single table. And users can explore your content very easily. Users can go anywhere inside your blogpost just by clicking on the heading given in your Table of Content

It helps Google to rank your paragraph of headings. It will also help you to decrease your website bounce rate. 


How to Add Table of Content Step by Step

It is quite simple to add a Table of Content in your Blogger website. All you need to do is, just follow these steps given below.

Before applying these steps, please take your theme back up. So that you can restore your theme setting if you face any error. 


Step1. Go to Blogger Dashboard

Just go to your blogger dashboard and go to the theme section.


Step2. Click on Edit HTML 

In the theme section, click on the down arrow given right ahead of Customize. And then click on edit HTML.


Step3. Add Code Below <Head> Section

Inside the theme editor, you just have to find the <head> section by pressing ctrl+F and type <head>. After finding this, copy code given below and paste below of <head> section then click on Save. 

<link href='' rel='stylesheet'/>
<link href='' rel='stylesheet' type='text/css'/><script type='text/javascript'>
//*************Table of Content (TOC) plugin by
function avsTOC() {var avsTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[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';}}


Step4. Find ]]></b:skin> code

After this, you just have to ]]></b:skin> this code. Just press ctrl+F and type this code and press enter to search. After finding this code, please copy the code given below and paste above ]]></b:skin>

.avsTOC{border:5px solid #EE5535;

box-shadow:1px 1px 0 #EDE396;




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;


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;}


Step5. Find <data:post.body/> Code

After this, you have to find <data:post.body/> this code as you find all previous code. Replace all these <data:post.body/> code with this code given below. And all set.

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


Step6. Add Code in Blogger Post

Now you are ready to add Table of Content in your Blogger post. Whenever you post an article and want to add a Table of Content in your Blogger post, you just have to paste this code given below in your Blogger post where you want to add Table of Content. 

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


Step7. Add this Code End of The Blogger Post

After pasting the previous post, you have to paste this code at the end of your Blogger post. 


Read Also: 

Conclusion of How to Add a Table of Content in a Blogger

I hope this article How to Add a Table of Content in a Blogger Website will help you. If you have any query or question regarding this post then please comment. We will feel honored to help you. Thank You.

Post a Comment

Please Don't enter any spam link in the comment Box

Previous Post Next Post