Add a Table of contents in blogspt---Step by Step

 

Add a Table of contents in Blogspot | The easiest method you can find

Image credit:pixbay.com

So you are here to read my blog post and I can easily conclude that you definitely want to add a table of contents to your blog at Blogspot. As blogger doesn't support plugins like WordPress So, it sometimes becomes very difficult to add widgets like a table of contents in Blogspot if you don't know much codings.

But don't worry because here in this post I am going to tell you a method to add a table of contents in Blogspot with just little or no coding skills. And I hope that at the end of this post you will be able to add a simple and decent table of contents to your blog posts.

Table Of Contents

• 1.SEO advantages of Table of Contents
• 2. Improve in user experience...
• 3.Adding a table of contents in blogger (blogspot)

 But let's first discuss the advantage of the table of contents as there are many SEO as well as user experience benefits of the table of contents.

SEO advantages of Table of contents.

We all know very well that all search engines including Google always have some special love for detailed as well as structured blog posts and of course by adding a table of contents to your blog posts, you are making your blog posts structured which will directly affect your rankings in Google search engine result pages (SERPs).

Improve in user experience...

User experience is always been an important part of SEO  but most people just don't focus on these little things and that's why just can't rank high in SERPs. Adding a table of contents in your blog post help viewers to easily navigate through your blog posts and read, only what they want to read. As users will have a good experience on your site you will experience fewer bounce rates which will help you rank higher and higher in SERPs.

See also: Adding a WhatsApp chat button in blogspot.

Adding a table of contents in Blogspot (blogger).

By the end of this post, you will be able to add a TOC like this to your blog.

So let's get started by adding a table of contents in your blogposts at Blogspot.

Step 1:  Copy this CSS code 

 /* Starting of TOC CSS Codes */

.mb-toc {

 border: 2px solid #ddd;

 background: #ececec;

 padding: 5px 10px 10px;

 margin: 15px 0;

 font-size: 18px;

 overflow: hidden;

 border-radius: 5px;

}

.mb-toc h2 {

 margin: 10px 20px;

 font-size: 25px;

}

.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 {padding-left: 10px !important;

 list-style-type: none;

 position: relative;

 margin: 0;

 cursor: pointer;

 background: #f7f7f7;

 float: left;

 width: 90%;

}

.mb-toc li:nth-child(odd) {

 overflow: hidden;

 clear: both;

}

.mb-toc li:nth-child(odd) li:nth-child(odd) {

 background: none;

}

.mb-toc li:nth-child(even) {

 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 10px;

 border-bottom: 1px solid #ddd;

 width: 100%;

text-decoration: none;

}

/* Ending of TOC CSS Code */ 

Step 2: In the left-hand sidebar go to the themes option and click on customize.

Step 3: Click on advance and then choose the " Add CSS" option.

Step 4: Add the above CSS code in the given blank and then click the save button.

Now, it's time to add the Table of contents to your individual posts which is pretty easy but can take some time.

Step 1: Go to the post in which you want to add a table of contents.

Step 2: Switch to HTML view.

Step 3:  Copy and paste the following code exactly where you want your Table of Contents to appear.

<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: Search for h2 or h3 headings and give them a unique id in this way 

Step 5: Replace "headingid" with the unique id and Your heading text with the Heading and Boom... you have successfully added a table of contents in your blog posts and now your viewers can easily navigate through your article.

So, now I hope that you can easily add a table of contents to your post in Blogspot and If you have any follow-up questions you can contact me via comments...

Learn about: Blogger SEO settings

Author: Huzaifa Azhar