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
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 */
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.
0 Comments
Although every comment is appreciated, Keep in mind that any link or keyword in the comments may be the reason for the deletion of your comment. Thanks for understanding!