Add a Manual Table of Content (TOC) in Blogger using HTML and CSS Only

Over the last few days, I was continuously in search of a good Table Of Content(TOC) for this blog but the problem was that I didn't want any automatic TOC for the blog, so I was desperately in search of a manual TOC for Blogger blog using HTML and CSS only.

As we all know that Blogger does not support any plugin like Wordpress so sometimes it's quite difficult to do things until any alternative method is applied for the work. Same went for the Table of Content also, I was searching a simple way to add TOC separately in any blog post where it is required.

There are many other SEO and user experience benefits in adding the Table of Content to any Blog post.

Table Of Contents

• 1. SEO Benefits of TOC
• 2. Improvement in User Experience
• 3. TOC for Blogger Posts
• 4. Tutorial for Adding TOC

SEO Benefits of Table of Contents for Blogger

Google has a separate love for the detailed as well as well-structured blog posts and articles and by adding the Table of Content in a very detailed blog post you can make it more structured which will directly affect your result in search result page of Google searches.

If your blog will be detailed and structured then it will display Jump to link in the search meta description area benefitting in the ranking of your result in Google search.

Here is the example of Jump to Links.

User Experience Improvement

User Experience is a vital component that plays an important role in the user engagement for any website or Blog. Many people don't take care of these little things and get penalized in search rankings.

Based on a study, User experience is the vital part of SEO to get a higher ranking in SERP. Adding a Table of Content will definitely help to improve user experience on any website. A report by NN Group, states that 79% of total web readers are only willing to read the important points and highlights of the webpage.

Table of Content in Blogger posts

It's very easy for any web developer to add Table of Content on any webpage but for a person with no coding skills, it can be a little bit difficult task.

Here is the screenshot of the Table of Content we are going to add:

This is a decent and simple Table of Content that can be easily added to any Blogger/Blogspot blog with a simple tutorial.

Tutorial for adding Table of Content in Blogger 

Step 1. Copy the below CSS as you need to add it to the theme of your Blog.

/* 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. Copy the above CSS code and navigate to the below sections.

Dashboard >> Theme >> Customize  >> Advanced >> Add CSS

Now add the above-copied CSS to Add CSS section. See the steps in the below pictures.

Step 3. Now you are done with the CSS part and now you just need to add the Table of Content HTML to anywhere you like it to display. You need to paste this code in your blog post and page every time you want to display a 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(where you pasted the HTML of TOC)

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

You have successfully created a simple looking and easy to load but an effective table of contents for your blog.