Subscribe Our YouTube Channel Subscribe Now

How to Add Table of Contents to Blogger Posts? Easy Method

in this article i will tell you hoe to add table of contents in long posts so that readers can get good reading experience. able to

Add Table of Contents to Blogger Posts

Just as at the beginning of every book, you definitely get a table of contents, in which all the headings and subheadings present in that book are given along with the page number and with the help of the same table of contents, you get to know that these books are yours. worked or not.

Similarly, if there is no table of contents at the beginning of long posts of any blog, then the user does not know whether those posts are of his use or not and he closes it without reading only after seeing the length of the posts. It is important to have a table of contents at the beginning of long posts.

What is Table of Contents (TOC)?

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 find a table of contents at the beginning of most of the articles in Wikipedia because it gives readers a good user experience 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 a 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 post.

How to add Table of Content (TOC) to Blogger posts?

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

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

Even if you do not know HTML, then it does not matter because even if you follow this post well, you can add TOC to your post. We will manually add TOC to our post from HTML, so this task takes some time.

But as I told you that table of contents is needed mostly only in long posts, so do not waste your time by adding TOC in short posts and definitely add table of contents in long posts so that readers can get good reading experience. able to

Let’s add Table of Content (TOC) from HTML to posts

1. Go to Blogger Dashboard

2. Go to Theme Option

3. Click on Edit HTML Option

4. Add the following code under the <head> tag

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




5. Now you have to paste the following code before (above) ]]></b:skin> tag.

.avsTOC{border:2px solid #d9d9d9;




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 0px;font-size:15px;}

.avsTOC a{color:#000000;text-decoration:none;}

.avsTOC a:hover{text-decoration:underline; }

.avsTOC button{background:#F6F6F6;

font-family:oswald, arial; font-size:20px;


outline:none;cursor:pointer; border:none;

margin:0 0 0 30px;font-size:15px;}

.avsTOC button:after{Jump To: “”;

font-family:FontAwesome; position:relative;

left:10px; font-size:10px;}



6. Replace <data:post.body/> code

Now you have to replace the <data:post.body/> code with the code given below

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

7. Paste this code before <h1> tag in post

Now you have to paste the below code in your post in html view before heading tag <h1>

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

8. Paste This Code at last of your post

Go to the html view and paste the following code in the last of the post


Stay connected With itsutkarshk And Follow Us On Instagram & Facebook Subscribe Our YouTube Channel

About the Author

Best place to get information and about tech, youtube, facebook, whatsapp, online earning, blogging & SEO, gadgets, sarkari result, sarkari naukari.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.