Add Table Of Content in Blogger Using HTML & CSS

Are you wondering how to go about adding a table of content to your blogspot website?

Well! it’s not so hard to do. In this guide, I’ll show you step by step how to create a table of content on your blogger website using pure HTML and CSS.

How To Add Table Of Content To Blogger

Follow the two simple steps below, and improve your blogspot SEO using the powerful table of content.

Add CSS code in blogspot theme

Go to blogger.com > theme > Edit HTML > Paste the below CSS code before ]]></b:skin>

#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 20px;
    width: auto;
}
.toc_title {
    font-weight: 700;
    text-align: center;
}
#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;
}

Add HTML code in your blogpost 

After placing the CSS code in blogger theme, now you can insert the HTML code in every blogpost to display a table of content.

<div id="toc_container">
<p>Contents</p>
<ul>
  <li><a href="#First_Point_Header">1 First Point Header</a>
  <ul>
    <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
    <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
  </ul>
</li>
<li><a href="#Second_Point_Header">2 Second Point Header</a></li>
<li><a href="#Third_Point_Header">3 Third Point Header</a></li>
</ul>
</div>

Assign the headings 

Then what you have to id is assign each heading/subheading with an ID to connect the links with the desired headings. Like the example shown below:

<h2 id="First_Point_Header">First Point Header</h2>

Voila!

If the table of content is not working with your blogger website, feel free to comment, and will do our best to help.