Custom Table of Content- How To Make For WordPress And Blogger

In this blog post, I am going to show you how to create a custom table of content in blogger and WordPress step by step. There are lots of free and paid TOC plugins for WordPress like Easy Table of Content, CM Table of content and more but these plugins will make your blog post load slower, which is a problem
And according to Google, page loading speed is one of the most important ranking factors.

So in this post, I will show you how to create a TOC with HTML and CSS in both CMS Blogger and WordPress. As you know blogger CMS doesn’t support plugins so we are going to make it with pure HTML and CSS.
But before we dive into the “How to “ part lets first discuss the importance of having TOC in your blog post.

Why Table of Content is Important

Not every website or blogs like a personal blog or business website will not need a table of content but if you are a running blog where you share informational articles then I will highly recommend you to add a TOC in your blog post.
Now, here are few benefits for having a table of contents

Easy to navigate:– According to a research by NN Group, 79% of total web readers are scanner even I am also a web scanner, I only read the important parts of a blog post.
And the table of content will help people to navigate through the blog post. So it is important to have a TOC in your blog post.

Good For SEO:- If you have a structured blog post then there is a chance that Google automatically adds a jump to link in your SERP snippet like this.

Google jump to links

Organizing your Blog Post:– As you know, Table of content help readers to navigate through the blog post and as a writer it will going to organize your blog post while writing it. It will give you a roadmap for writing your blog post.

structuring blog post

I think this will be pretty much to understand the value of having a TOC in your blog post.
Now,

table-of-content-design-for-wordpress-with-out-any-pluginNote:- In this blog post, we are going to make this design.

Choose your blogging platform.

How to Add TOC in WordPress Post and Pages without any Plugin

Adding a custom table of content can be tricky for a non-technical person but here, I will going to show you step by step process which will make it easy.

So without wasting any more time let get started…

1.Copy and Paste CSS codes:- here, you need to copy all the CSS code from below. This will become the design of our TOC.

/* 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 */ 

Now, you have to paste it in your WordPress blog, to do that you need to click into Appearance then Customizer and go to Additional CSS,


Appearance >> Customizer >> Additional CSS

Additional css in wordpress

Here paste all the CSS code, you have copied earlier.
( Note:- If you update your theme then these codes will automatically get erased. So you have to paste over and over again )
But if you are using a plugin like Simple Custom CSS then you can paste into it.
Now, Let’s move to the second step…

2. Copy and Paste HTML Codes:- Now, you have to copy HTML codes from below and paste it into your blog post and pages. You have to paste every time this Html code in your posts and pages if you want to add TOC.

<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>

3. Add Id in Your Heading Tags:– Here you have to add a unique id to your heading. it could be anything you want, but don’t add space in your id.

giving unique id in heading tags

Now, Fourth and last step…
Add the unique id in the HTML codes and Replace table of content text.

Changing id and text in html code

Here we go, You have successfully created your custom Table of content for your WordPress blog.

How to Add Table of Content in Blogger Post

Blogger or Blogspot is a free blogging platform by Google. And it is not as flexible as WordPress, In WordPress, you can add TOC plugins but Blogger platform does not support plugins.
So you have to create a table of content manually, which is quite easy if you follow it step by step.

The first step is to…

1.Copy and Paste CSS codes:- Now, you have to copy all the CSS code given below and paste it in the root of the blogger’s theme. It is easy to do.

/* 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 */ 

First, from the dashboard of blogger go to Layout and open the theme designer
Layout >> Theme Designer



Then, In theme designer go to Advanced and click on Add CSS
Advanced >> Add CSS


Now paste all the copied CSS in the box and Click apply to blog.

2. Copy and Paste HTML Codes:- Here, You have to copy all the HTML code given below and paste it into your post and pages. You need to paste in every post and page where you want to show 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>

3. Add Id in your Heading Tags:- Now, you have to add a unique id in your every heading tags in the blog post.

After that replace the unique id into HTML codes and write the text for the table of content.

That is it, Now you have successfully added your custom table of content in blogger post.

Conclusion:- Yeah! we are done now. You have successfully created a good looking custom table of content for your blog without a plugin. Believe me, TOC plays a very important role in gaining the attraction of your readers and this guide has definitely helped you to do that.
Now! Do let me know which blogging platform you are using?
Do you have a Blogger’s blog or a self-hosted WordPress blog?

JOIN OUR VIP GROUP

TO GET ACCESS ALL THE SECRECT CONTENTS

Leave a Comment