How to add stylish table of content on blogger

What's up, guys? In this article, I will tell you how you can add a stylish table of content on your blogger blog. Someone of my friends asks me for creating a stylish table of content this why I am decided to write an article about how you can install a stylish table of content. On the world of the internet, you get so many types and stylish tables of content for blogger but I am trying to give you a unique widget.

Result

Benefits of the table of content

There are so many benefits of a table of content, now I am talking about some highlighted benefits of the table of contact. Table of content help your article visitor to jump there any section they want. The table of content is also called the article map. If you use the table of content then you get the article jump link from the google if don't understand then see the below image.

How to install the table of content

Follow the below steps to install this table of content:

Open Blogger
Now go to the theme section then edit HTML
Now Search for </head> tag
To search any word on the theme edit HTML mode then press on anywhere of the code and press Ctrl + F and enter the word and again press enter.

Now add the below code after the </head> tag

<style>.sponsor{text-align:center;}
.sponsor img{border-radius:6px;}
.soore-toc{background-color:#f9f9f9;margin:15px auto;padding:10px;border-radius:6px;border:1px solid rgba(155,155,155,0.3)}.soore-toc h3{display:inline;font-size:18px;font-weight:500;margin:0 auto;}.soore-toc a {text-decoration:none}.soore-toc a:hover {text-decoration:underline}.soore-toc ul {list-style-type:none; list-style-image:none; margin:0; padding-left:15px;}.soore-toc ul li a {margin-left:.5em}.soore-toc ul li {list-style-type:none;}.soore-toc ul li ul {margin-left:2em}.soore-toc-toggle-label {cursor:pointer; }:not(:checked) > .soore-toc-toggle {display:inline !important; position:absolute;  opacity:0}:not(:checked) > .soore-toc-title:after {content:'';float:right;}
#soore-spoiler{display:block;margin:10px auto;}#soore-spoiler button{display:block;background:#292e34;color:#fff;padding:10px 53px;border-radius:6px;border:none;}
#soore-spoiler-content{display:none;background:#f0f8ff;margin:10px auto;padding:15px;border-radius:6px;}
.soore-toc-toggle:not(:checked) + .soore-toc-title .soore-toc-toggle-label:after {content:'Hide';display: inline;float:right;}
.soore-toc-toggle:checked + .soore-toc-title .soore-toc-toggle-label:after {content:'Show';float:right;}:not(:checked) > .soore-toc-title:before {content:'';float:right;} .soore-toc-toggle:checked ~ ul{display:none}:target::after {content:''; display:block; height:0px; margin-top:0px; visibility:hidden}
.soore-btn-inner{display:inline-block;margin:10px auto;}.soore-btn-demo{display:inline-block;font-size:17px;background-color:#00a3fe;color:#fff!important;padding:8px 65px;border-radius:6px;}.soore-btn-download{display:inline-block;font-size:17px;background-color:#292e34;color:#fff!important;padding:8px 53px;border-radius:6px;}</style>

Now save the theme and exit from edit HTML mode of your blogger theme
Table of content installs done.

How to add this table of content of the post

Now you have questioned how you can add this table of content on your post or page. It's so easy to add this table of content. First give your headlines to heading (choose the heading option from the toolbar of the blogger post editor) then go to your heading text from the HTML view then add an id like the below image.

Now add any id you want on the heading like the image.

Note: Give a unique id for each heading. If you give same id for more then 1 heading then it's not work. So gives unique id for every heading

Now add the below code where you want to add the table of content

<div class="soore-toc"><input type="checkbox" role="button" id="soore-toc-toggle" class="soore-toc-toggle"><div class="soore-toc-title"><h3>Table Of Content</h3><label class="soore-toc-toggle-label" for="soore-toc-toggle"></label><br />
</div><ul>  <li>1.<a href="#toc1">Top 5 WordPress free hosting providers</a></li>
  <li>1.<a href="#toc2">Can you make your main website on free hosting</a></li>
  <li>1.<a href="#toc3">Last word</a></li>
    </ul></div>

Replacement

Yellow - add your heading id on the yellow text

Red - add your heading title on the red text

Conclosing

This a small article about how you can install a stylish table of content on the blogger blog. If you face any kind of problem with this article then please tell on the below comment box. Thanks for with us.