How to Add Table of Contents in Blogger

 How to Add Table of Contents in Blogger

Hello friends, in this article I will tell you how to put a table of contents in a blogger blog. By the way, this option is easily found with the help of a plugin in WordPress, but in Blogger a little hard work has to be done. Putting the table of contents in Blogger has many benefits such as your blog post starts ranking in Google and with this, the user interface also becomes good. You can easily edit it in your blog. 

Blogger Table Content

How to Add Table of Contents in Blogger

Friends, by doing this your blog will be easily ranked on Google. The biggest reason for this is that applying it reduces the bounce rate. Because whenever someone opens your blog post, he will see the table of content in the beginning, then he will know what is in your post and by clicking on whatever he has to read, he can read the section of his choice directly. 

Apart from this, ON Page SEO also improves by applying it and due to this, the chances of getting blog post rank also increase. 

Table Of Content Code

Adding a table of contents to your Blogger blog can be done using a few simple steps. Here's an easy way to do it:

Create Headings in Your Blog Post:

Start by creating headings in your blog post. Use headings like H2, H3, etc., to structure your content. For example:

html

Copy code

<h2>Introduction</h2>

<p>This is the introduction section.</p>

<h3>Subsection 1</h3>

<p>This is subsection 1.</p>

<h3>Subsection 2</h3>

<p>This is subsection 2.</p>

<h2>Main Section</h2>

<p>This is the main section.</p>

<h3>Subsection 3</h3>

<p>This is subsection 3.</p>

Add Table of Contents Widget:

Go to your Blogger dashboard.

Navigate to Layout > Add a Gadget.

Choose the "HTML/JavaScript" gadget.

In the content box, paste the following code:

html

Copy code

<div id="table-of-contents">

    <h2>Table of Contents</h2>

    <ul id="toc-list"></ul>

</div>

<script>

    document.addEventListener('DOMContentLoaded', function () {

        var headings = document.querySelectorAll('h2, h3');

        var tocList = document.getElementById('toc-list');

        headings.forEach(function (heading) {

            var listItem = document.createElement('li');

            var link = document.createElement('a');

            link.textContent = heading.textContent;

            link.href = '#' + heading.id;

            listItem.appendChild(link);

            tocList.appendChild(listItem);

        });

    });

</script>

Save and Preview:

Save the gadget, and then preview your blog post. You should see a table of contents generated automatically based on the headings you created in your post.

Adjust Styling (Optional):

If you want to style your table of contents differently, you can modify the CSS within the <style> tags in the HTML/JavaScript gadget. For example, you can change the font size, color, background color, etc.

That's it! You've successfully added a table of contents to your Blogger blog using an easy method.