How To Add Light Table Of Contents For Blogger Website With CSS & HTML

Table of contents is very useful for finding content structure as well as it helps in Search Engine Optimization. In WordPress, there are hundreds of plugins available for a table of contents, like every-time blogger has fewer features than WordPress as it is free to use.

showing-jump-to-direct-link-on-google-search-engine-results-pages
Features Of Table Of Contents In Google SEO

But with the help of some CSS and HTML codes, it is possible to add a table of contents for a blogger website. You will have to paste these codes into your website’s every article one by one. There is no method to copy/paste these codes with one-click.

Adding a Table of Content in Blogger Website with HTML and CSS

As you know putting more & extra codes to your blogger website can slow down your blogger website. In our Previous article of Creative Table Of Contents, we give you the codes that are heavy or can slow down your website. But the codes we give you in this TOC guide & the table of contents are light and healthy for your website.

Adding TOC in blogger Website also look like a Professional Blogger Website. And an easy way to find relevant content on page structure.

It can be an easy task to create Toc with Html and CSS for a web developer but not for the person who doesn’t know about coding. But here, We created a step by step guide to add a light & easy table of contents for blogger website. And this guide is suitable for beginners or who don’t know about coding & blogging.

how-to-add-a-light-table-of-contents-in-blogger-website-with-css-and-html-text-image
How to add table of contents “Toc” in blogger website with CSS & html

In this guide of InfoTech APB, we will gonna learn that how can we add a table of contents to a blogger website with the help of CSS & HTML codes.

Here, in this article “TOC” equals “Table Of Contents

Advantages Of TOC Table Of Contents:

As you know Google loves the very detailed and well-structured blog posts and web pages.

Here How to Add A Table Of Contents For Blogger Website

In this method, we will be going to establish this design.

table-of-content-design-for-blogger-without-any-plugin
Example Of table of content in Blogger Website
  • Step 1:- Copy the below-given CSS code.

In this step, you have to copy all the CSS codes given below and paste them into the root of your blogger theme. [ or you can paste it in </body> tag]

CSS Code For Table Of Contents TOC In Blogger Website

/* 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 */ 
  • Step 2:-  Paste the entire CSS Codes on Your Blogger Website’s Custom CSS Section.

To paste the CSS codes, open the dashboard of your blogger blog then go to Layout and then Theme Designer…Dashboard >> Layout >> Theme Designer

adding-table-of-content-code-in-blogger-dashboard-screen
Adding TOC code in Blogger website by Dashboard

And then in theme designer click to Advanced and go to Add CSS Advanced >> Add CSS

Now paste all the CSS codes here

adding-toc-code-in-blogger-theme-section-additional-css-code
Adding TOC code in blogger optional custom CSS section
  • Step 3:-  Copy the below given HTML codes.

In this step, you have to copy the HTML codes given below.

  • Step 4:- Paste the HTML Codes to Your Blog Post & Pages.

In this step, you have to paste the HTML codes to your blog pages and posts. You need to paste this code in your blog post and page every time you want to display a Table of Content. 

Custom HTML Code Of TOC in Blogger Website

<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 5:-  Add a Unique ID to your Heading Tags.

In this Step, you have to add a unique Id to your heading tags in your blog post.

adding-unique-id-in-toc-heading-tag-in-blogger-custom-html
Adding Unique Id In TOC heading by cutom html
  • Step 6:-  Replace Unique Id And Anchor Texts.

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

adding-id-and-text-in-toc-custom-html-in-blogger-website
adding id and text in HTML code

Great! You have successfully created a classic looking and easy to load “table of contents” for your blogger blog website.

These CSS & HTML Codes Are Generated By MyBloggingTricks.com give them thanks.

Conclusion:- 

You’re done. For your blogger blog post and pages, you have built a good looking and SEO friendly table of contents. This custom-designed TOC will help you attract the attention of the user. Let me know in the comments section, though, if you have any problems.

You May Like Related To This:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.