In this blog post, I am going to show how you can add a Table of Content in your blogger blog post. As you know, Blogger does not support Plugins like WordPress does, However, if you have little tech knowledge you can easily create a custom-designed lightweight toc for your blog.
So I this post I will show step by step method to make TOC for your blog post and pages.
Table Of Contents

But before we get started, Let’s discuss some benefits for having a TOC in your blog post.
Also check out: Submit blogger sitemap to Google Search Console
SEO Benefits of TOC
As you know Google loves the very detailed and well-structured blog posts and web pages. And by adding toc in your blog post you can make your blog post more structured.
And If your blog post will be well structured then google can display Jump to links in the meta description in Search Result Page.
Which is a huge Blogspot SEO benefit!
Now, Here is an example of Google Jump to links.

Improved User Experience
User experience is another very important part of a blog which lots of Blogger don’t take seriously. But here is the game,
according to a study user experience is the key to get higher ranking in SERP.
And a Table of Content will going to help you, improve the user experience of your website.
According to a research by NN Group, more than 79% of total web readers are scanners who only read the important points of a webpage.
And adding a TOC will allow your readers to jump to the important part of a blog post. Which can be a breakthrough for user experience of your website.
Now, lets first discuss how you can automatically add a table of contents in google blogger posts.
Before you dive deeper in this blog post, I want to invite you to join our community (Group) on Facebook, a group of friendly entrepreneurs who are ready to help each other Click here to join us.
Here is How to Automatically Create Table of Contents in Blogger
I am going to divide the workflow of making a TOC into 5 easy steps so it will become super easy for you to implement.
Step 1: Now, the first thing you need to do is Login to your Blogger dashboard and then go to the Theme editor.
And click on the Edit Html button.
Blogger Dashboard >> Theme >> Edit Html
It will bring you lots of codes on your screen.
Here, you have to paste the codes given below
Just above the close heading tag </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[
//*************TOC plugin by MyBloggerTricks.com
function mbtTOC() {var mbtTOC=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);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>
Step 2: In this step, we are going to style our table of content.
To do that you need to paste these CSS codes
Find the ]]</b:skin> in your screen and paste the CSS codes just above the ]]</b:skin>
.mbtTOC{
border:5px solid #f7f0b8;
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%;
}
.mbtTOC ol,.mbtTOC ul {
margin:0;
padding:0;
}
.mbtTOC ul {
list-style:none;
}
.mbtTOC ol li,.mbtTOC ul li {
padding:15px 0 0;
margin:0 0 0 30px;
font-size:15px;
}
.mbtTOC a{
color:#0080ff;
text-decoration:none;
}
.mbtTOC a:hover{
text-decoration:underline;
}
.mbtTOC 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;
}
.mbtTOC button:after{
content: "\f0dc";
font-family:FontAwesome;
position:relative;
left:10px;
font-size:20px;
}
Step 3: Here you just have to tweak a line or two of code in blogger theme. Search for the code <data:post.body/> and replace it with the code given below.
If you find more than one <data:post.body/> then replace all with the codes given below.

<div id="post-toc"><data:post.body/></div>
Step 4: Now, In this step, we are going to activate the TOC in our blog posts.
It is quite simple and easy to do.
First thing you need to do is paste the Html code given below in the blog post, where you want to show the table of content.
I will recommend you to paste the code after the first paragraph of your blog post.
<div class="mbtTOC">
<button onclick="mbtToggle()">Contents</button>
<ol id="mbtTOC"></ol>
</div>
Step 5: And this is the last step here, you need to paste this JS code at the very bottom of the blog post or page where you want to display the table of content.
<script>mbtTOC();</script>
Migrate Your Blogspot Blog to WordPress and Save upto 90% of your Hosting Charges
That’s it you are done!
You have successfully created an automated toc for your blog post.
Note:- This project has developed by mybloggingtricks.com so big shout out for them.
But keep in mind that this table of content has only made with XML and Javascript codes, so it can make your blog too heavy to load.
And it is also not stylish to look…
But don’t worry, I will help you to create easy to load and stylish TOC with only HTML and CSS.
How to add a Table of Content in Blogger with HTML and CSS
It can be an easy task to create Toc in Html and CSS for a web developer but it can not be an easy task for a non-techy person.
But here, I will you show you step by step method which will be comfortable for both techy and non-techy person.
Here is the deal
In this method, we will be going to establish this design.
Step 1:- In this step, you have to copy all the CSS codes given below and paste it into the root of your blogger theme.
/* Starting of TOC Css Codes */
.mb-toc {
border: 2px solid #ddd;
background: #ececec;
padding: 5px 20px 20px;
margin: 40px 0;
font-size: 18px;
overflow: hidden;
border-radius: 5px;
}
.mb-toc h2 {
margin: 10px 20px;
font-size: 30px;
}
.mb-toc ul {
margin: 0;
list-style: none;
float: left;
width: 100%;
}
.mb-toc ul ul li a {
padding-left: 45px;
}
.mb-toc ul ul li {
background: none;
}
.mb-toc li {
list-style-type: none;
position: relative;
margin: 0;
cursor: pointer;
background: #f7f7f7;
float: left;
width: 100%;
}
.mb-toc li:nth-child(odd) {
background: #fff !important;
overflow: hidden;
clear: both;
}
.mb-toc li:nth-child(odd) li:nth-child(odd) {
background: none;
}
.mb-toc li:nth-child(even) {
background: #f7f7f7 !important;
overflow: hidden;
clear: both;
}
.mb-toc li:nth-child(even) li:nth-child(odd) {
background: none;
}
.mb-toc ul>li:hover>a {
background: #fffcd1;
}
.mb-toc li a {
color: inherit;
padding: 8px 0 8px 25px;
float: left;
border-bottom: 1px solid #ddd;
width: 100%;
text-decoration: none;
}
/* Ending of TOC css Code */
Step 2:- To paste the CSS codes, open the dashboard of your blogger blog then go to Layout and then Theme Designer…
Dashboard >> Layout >> Theme Designer
And then in theme designer click to Advanced and go to Add CSS
Advanced >> Add CSS
Now paste all the CSS codes here
Step 3:- In this step, you have to paste the HTML codes given below to your blog pages and posts. You need to paste this code in your blog post and page every time you want to display Table of Content.
<div id="toc" class="mb-toc">
<h2>Table Of Contents</h2>
<ul>
<li><a href="#headingid1">1. Your heading text </a></li>
<li><a href="#headingid2">2. Your heading text</a></li>
<li><a href="#headingid3">3. Your heading text</a></li>
<li><a href="#headingid4">4. Your heading text</a></li>
<li><a href="#headingid5">5. Your heading text</a></li>
</ul>
</div>
Step 4:- Now you have to add a unique Id to your heading tags in your blog post.

Step 5:- After adding the unique id to your heading tags replace the Id in Html codes and change the anchor text.

Boom!
You have successfully created a stylish looking and easy to load table of contents for your blog.
Conclusion:- Ahha You are done, You have created a good looking and SEO friendly table of contents for your blogger blog post and pages.
This custom-designed TOC will help you to attract the user’s attention.
However, do let me know if you are having any problem?

Now! Which method you are going to use? Are you going to use a custom-designed method or automated method?
Please let me know in the comments section…
The TOC is really showing up on search signals I see, Bitu. Smart post.
Ryan
Yooooo! I tried it perfectly working.???
Awesome bro
Make sure to join our Facebook group .
there is no in my theme html…help me
Hey ganu can you please elaborate?
Which problem you are having ?
actually, I used it but it just shows up only [ content ] and no any formation of table of content what should I do now kindly check I m ur regular viewer and your all posts help me very much.
Just follow all the steps in the blog post.
In case you need help
Mail me at help@mastertheseo.com with the details.
I will love to help you.
Hi Bitu,
That’s a super well-guided article. Table of content has lots of benefits, it looks clear and organized. I’ve always wanted to use it on my blog but didn’t get well enough article for this.
I will surely come back to you if I have any issues. I’m truly grateful to encountered this needed article.
Thanks,
🙂
Sure jeangam ?..
Thanks for this table of content. This is really help me a lot for my blogger website. Keep posting such a lovely post for us.
If you needed any help you can contact me ?.. and make sure to join our team by subscribing our newsletter.
How do I change the text style all the text?
Hey Tania
Do you want to change the font of only table of contents?
I have emailed you check that out.
Wish you all the very best
On clicking my content I am redirecting to my blogger dashboard
Hey Sahil
I think you are doing any mistake in step 4 and 5.
You have to add an id in your heading tag.
And then you need to add that id in href section of table of contents.
If you still having problem then you can ask it in our Facebook group.
Wish you all the very best
]]
I am not finding this code inside my blogger theme. Is there any other place to paste the above code.
Hey probin,
There will be this code ]] .
Otherwise you can paste it into css field of your blog.
To add it in css section follow these steps.
From your blogger dashboard go to Layout >> Theme Designer
Then Advanced >> Add CSS
Now paste that css codes there.
If you still find any problems do let me know. Or you can ask me at our Facebook group.
Join it from the link at the bottom.
Thank You. I got it and now it is working fine. Thanks again
Sure. If this blog post was helpful for you then make sure to share with your blogger friends. And make sure to join our Facebook group to connect with people like you.
Very good knowledge. Thank u
this is shoeing only h2. how can i show all headings?
Sorry adel,
But you can only asign one heading tag. If you want to use all the heading tag in your post then use the second method.
And if you are getting any other problem let me know in our Facebook group.
i found this code only once. I hope it is okay?
wow, this is what i want
Thanks you dhyde
And make sure to join our Facebook group
Really helped in setting up my blog well. Thanks
I can get it to work but after awhile it goes to a code like this
5.
I can’t figure out wht
Hey Tiana
Can you please tell me what is the problem you are getting?
So I can help you out.
Oh sorry I didn’t paste right. My table of contents works but after a few days I click on one of the links and it goes to blogger homepage. I can see this code where the table of contents beginning is
href=”https://www.blogger.com/u/1/blogger.g?blogID=2542684277789945518#one”>1. Journal </li
I did the css code. Like I said everything works when I publish then after a few days it doesn't. I am not sure what is happening
I think, there is a problem in the codes or you are pasting it in the wrong place.
Try doing it one more time, If it doesn’t fix then I will do it for you.
Ok I will look and try to figure it out. Thank you. Hopefully I can get it to to work. I will message you on your Facebook page if it doesn’t work
Okay sure,
Thanks, it worked for me. Love from Goa , India . Keep doing the good work . God bless you.
Thanks you so much, Join our Facebook Team to learn more Blogging Stuffs .
great any more tips and tricks for blogger?
You can ask me, what do you want to know?
Nice
THANKS ALOT, THIS WORKS BETTER THAN ALL OTHER TUTORIALS I HAVE PRACTISED. THUMBS UP AND PLEASE DROP MORE TUTORIALS.
Hi.
The TOC is only taking the main headings. do you have an idea how it could also include the subheadings?
Hi sir, this table is wonderful but the problem is the table is not in the perfect width and height according to my website. Please help me…
I will adjust the width and send you the new css. Make sure you join our facebook group.
this is really usefeul! thank you..However, how do I link the content to the table of content. I am doing something not right 🙁 Also, it also shows a bit bigger than I thought in my website. I would appreciate your help!
It will be very helpful if you mention your blog URLs so I can look into it.
Make sure you join our Facebook Group
CONFUSE BETWEEN STEP 4 AND STEP 5 .
Okay let me help you. Join our Facebook group
table of content not working only showing table of content nothing else
help.
good
Great article I have implemented the same and it looks awesome.
100% Working
Thank you so much for this article bro but I have one question, will this TOC appear in Google search results? I mean does it affect SEO or help us rank better?
Thanks, this really helped! The automatic table script didn’t work, but with the CSS, it worked!
Hi Admin,This article helps me lot. As a blogger i learn best knowledge of TOC from your article.
THANKS You.
It really works. can you also share that how can we remove the date from the blogger post. Thanks in advance
I am glad it works for you. I will mail you as soon as i get any ways to remove date from your blogger post.
First one is better. But i habe a question. Like in wordpress initially table of content is hide and when user click on “hide” then list will be shown. But in blogger table of content is shown direvtly.
How can i achieve this as it is in wordpress?
Please reply
using HTML and CSS code to add Table of content but when click to any point in table of content not go direct into that heading.
Can you please add the link of your blog pos?
So i can check it out.
However you can Join our facebook group to connect with experts.
using HTML and CSS code to add Table of content but when click to any point in table of content not go direct into that heading.
Hai Its a very light code and it doesn’t affect the loading speed but i don’t know why its not working please go through the link and let me know. Thank You
https://www.insidethemovie.com/2020/05/gulabo-sitabo-movie.html
Hey Andrew,
Sorry for the problem..
I will check it asap.
You can join our facebook group to connect with me.
Hai I have found what went wrong, now its working but the only problem is before the numbers it shows some symbol like > can you please tell me how to remove it. Thank You
Okay.. this may be happening because of your themes code.
I will send you the css codes wich will remove the symbol.
Till join our facebook group
Hai joined your facebook group I also want to tell you that it also shows a bit bigger than I thought in my website. I would appreciate your help!
Actually Very Useful information and well-guided.
Thanks
Thanks for this table of content. This is really help me a lot for my blogger website. Keep posting such a lovely post for us.
using HTML and CSS code to add Table of content but when click to any point in table of content not go direct into that heading.
https://www.knowhowwithfact.com/
It’s works very fine
Perfect for the kind of content write..
And it also shows the jumplink in SERP
Thanks for sharing this
God bless you
THANKS, BOSS FOR THIS GREAT INFORMATION.
Such an amazing article.
Thanks a lot Bitu
Thank you for sharing such a wonderful code. I really enjoyed this code. It is really helping me lots to write the post to show to my readers, how good it is when we showcase table of contents.