How to Create Table of Contents in Blogger 2022

Add Table of Contents in Blogger

If you want to add a Table of Contents to your blog, be aware that Blogger does not provide us a lot of widgets. As you all know that if you are a user of wordpress, you can add any kind of plugin to your website using a single click.But in the case of blogger. You have to manually add all kinds of widgets And these widgets are either created by you or you use a third party website and Blogger does not provide us these widgets

But in today's post I will tell you how you guys can put a Table of Contents in a blog post and if you can't coding then you guys don't need to worry because all kinds of codes are provided in this post. But you have to follow this post step by step so that you can add table of contents in your post easily.

What is a Table of Contents?

The first question that comes to your mind is what is a Table of Contents, So the answer is that a Table of Contents is a table in which all the questions of the post are already identified. This lets visitors know which questions are discussed in this post and visitors can easily find the answer to any question and also with this table You can go to the answer to your desired question with a single click

We either add the table of content in all our blog posts one by one or we put an automatic table of contents in our blogger template but in today's post we will learn how to put a table of content in all our posts manually.

Benefits of using Table of Contents ?

If we talk about the benefits of the table of content, then the table of content has many benefits, So let's take a look at some of these benefits here

• It helps visitors find the answer to their desired question.
• It also helps make your blog post looks professional.
• This makes your blog post stand out in Google results.
• It also causes to get more traffic to your post from Google.

Can Table of Contents Improves SEO of post ?

As we have already discussed the numerous benefits of the Table of content Similarly, Search engine optimization is one of the major benefits of Table of Contents. When your post shows in Google search, due to the use of Table of Contents, you see small questions along with your post.So it is possible that the searcher will find the answer to his question in these sub questions

We can say that the table of contents increases the views of our post By using the table of contents we can get more clicks on our post and so Google thinks it's too relavent for searcher and that can help us get our post boost up on Google search. So, this question leads to the conclusion that the table of contents cause to an improvement in the ranking of our post.

add table of contents in blogger?

After learning a lot about the Table of contents, Now its time to learn how to put a table of contents in our blog posts.

• Open your blog or - Create account
• Go to Theme > edit html 
• Paste given css code before closing head tag.

<style>details.TOC summary{font-weight: 800; font-size: 1.75rem;line-height: 1.3634;color: #333;display:flex;justify-content:space-between;align-items:baseline}details.TOC summary::after{content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9JyM5YWEwYTYnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNy40MSw4LjU4TDEyLDEzLjE3TDE2LjU5LDguNThMMTgsMTBMMTIsMTZMNiwxMEw3LjQxLDguNThaIiAvPjwvc3ZnPg==);}details.TOC[open] summary::after {content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9JyM5YWEwYTYnIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNy40MSwxNS40MUwxMiwxMC44M0wxNi41OSwxNS40MUwxOCwxNEwxMiw4TDYsMTRMNy40MSwxNS40MVoiIC8+PC9zdmc+);}.TOC .lwptoc_item_label{ text-decoration:underline;}.TOC~summary,.TOC~h3,.TOC~h4,.TOC~h5,.TOC~h6{margin-top:16px}.TOC{border: 1px solid #dadce4;border-radius:8px;background-color: #f4f7fa;}.TOC summary{border-bottom:1px solid #dadce4;font-size:18px;margin:0;padding:8px 12px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.TOC>ol,.TOC>ol{counter-reset:list-counter;list-style:none;margin:0;padding:8px 12px}.TOC li{line-height:1.75}.TOC a{box-shadow: none!important;border: none!important;color: #000000;font-weight: 700;}.TOC a::before{content:counters(list-counter,'.')'. ';counter-increment:list-counter;color:#5f6368;display:inline-block;min-width:18px;margin:0 4px 0 0} .TOC li ol,.TOC li ol{-webkit-box-sizing:border-box;box-sizing:border-box;counter-reset:list-counter;list-style:none;margin:4px 0;width:100%;padding:0 0 0 26px}</style>

After adding CSS file to the template, save the template and open any one post and in the part of the post where you want to show the table of contents, paste the given file there.

<details class="TOC">
<summary  data-show='Show all' data-hide='Hide all'>Table of Contents</summary>
<ol>
<li><a class='lwptoc_item_label' href="#toc_1flhi0g6ir">Blogger course</a>
<ol>
<li><a class='lwptoc_item_label' href="#toc_1flhiev0b1o">How To Post?</a></li>
</ol>
</li>
<li><a class='lwptoc_item_label' href="#toc_1flmnge6l4">How to make money online?</a>
<ol>
<li><a class='lwptoc_item_label' href="#toc_1flrugqf01">Make 200$ a day</a></li>
</ol>
</li>
<li><a class='lwptoc_item_label' href="#toc_1fltm8rb54">Thanks for watching</a></li>
</ol>
</details>

After adding the given file, you can update your post. There will be a table of content shows in your post but if you come across any kind of issue then you guys can solve your problem by watching this video tutorial.