How to create table of contents on blogger

Hi! This tutorial will show you how to add Table of contents on blogger blogspot like pro and make your blog posts look very professional and SEO friendly.

Even though blogger platform doesn't manual support plugins like WordPress, we all try to find one solution or the other to make the best out of our blogs to improve our websites and it's SEO. Fortunately, there are few if not many plugins now that are use to customize blogger blogs.

Some of this plugins are very good for user experience (UX) and SEO. plugins like the Table of Contents aka TOC can make your blogger blog posts look like never before.

However, in this article I will show you how to add Table of Contents on blogger blogspot like pro. It is very simple and straight forward. When you follow this steps you will do it like pro.

What is a Table of Contents

You may probably have seen how TOC is and have known what they mean. But we will take a short snap on what table of content is before going to how to add it to your blog posts.

In general a Table of Contents I a short list of the the headings, subheadings and minor headings of an article. It is also the brief highlight of what is going to be covered in a piece of writing.

But in a blog posts it is the arrangement of a clickable headings, subheadings and minor headings to give readers insight about what to expect usually at the beginning of a post that when clicked can be jumped to desired location in the post.

Why do I need Table of contents on blogger blogspot

Well, I know before jumping to this article you may probably have been looking for how to add Table of Contents on blogger blogspot for some reason you may have which may be different from mine. But some of the major reasons why someone may need a table of contents on his blog are:

1. To increase User Experience
2. To improve pages SEO.
3. To increase ranking on SERP.
4. Increase possibility of getting 'Jump Links" on google search.
5. Increase Click Through Rate (CTR) for a page.
6. Increase article/post structure, easy navigation and professionalism.
7. Create a road map or screenshot for a page.

How to add Table of Contents on blogger blogspot

1 step

Go to your blogger dashboard on blogger.com and navigate to "theme" and then to "drop-down" and then to "edit HTML" like on the screenshot below

add Table of contents on blogger HTML

Important: if you are not familiar with coding or not sure of what you are doing make sure to backup your website by using the "backup" so that when you make some mistakes you can restore your website theme with the "restore" option. If you don't know how to backup your website you can ask your questions on the comments.

2 step

In the HTML codes of your site click anywhere and press ctrl+f on your keyboard a search bar will appear. Search for body>  and paste the below codes just above the body>

  

 3 step

Make another search for ]]> and paste this codes just above it

.mbtTOC{border:5px dashed dodgerblue;box-shadow:2px 0px 10px 4px silver;background-color:#f2f2f2;color:black;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:#f2f2f2; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:black;padding:0 0 0 15px;} 
.mbtTOC button:after{font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

.mbtTOC{border:5px dashed dodgerblue;box-shadow:2px 0px 10px 4px silver;background-color:#f2f2f2;color:black;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:#f2f2f2; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:black;padding:0 0 0 15px;} 
.mbtTOC button:after{font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

4 step

You need to make another search for and paste this codes above it too

From now you save your HTML codes

Important: Before saving your codes make sure you preview your site after pasting these codes. Preview will show you if there is any problem with the codes you paste. If it is successful then go ahead and save it