How To Create Table Of Contents In Blogger Post 2022

In this article, I will discuss How To Create Table Of Contents In Blogger Post. I will also discuss what is table of content, why it is essential, and more information about it.

how to create table of contents in blogger post

If you want to give your blogger website a professional look, it is essential to add table of Content to your website. 

Also, It is essential for SEO ranking. But do you know how to create table of contents in blogger post?

If your website is in WordPress, you don't have to worry about adding it because you will get many plugins to add Table of Content to WordPress.

The problem will be when adding it on Blogger. Because no plugin can be used in Blogger.

But you don't have to worry. Today I will teach you how to add table of contents in blogger website.

After reading this post carefully, you will know what is Table of Contents? What are the benefits of using a Table of Content? What is the importance of SEO? And how to create table of contents in blogger post? So let's start...

    What is Table of Content?

    It is the tabular format of a website that gives an overview of the structure of a blog post.

    What is Table of Content?

    If there is a table of content on the web page, the user can easily understand what is written in this post. Again, if the user has less time, he can read only the information he needs with the help of table Of Content.


    Let's illustrate the point with an example.

    Suppose you went to a library. Now you need a book. But no librarian in the library can get the book out. So what do you have to do? You need to find the complete library and find that book. Isn't that so?

    how to create table of contents in blogger post

    But if there were a librarian here, you wouldn't have to work so hard.

    You tell him the book you need to get it out. Since he is a librarian, he knows where the books are.

    He would have let you out very quickly. The work of the Table Of Content is precisely the same.


    What are the benefits of using Table Of Content in Blogger?

    What are the benefits of using Table Of Content in Blogger?

    There are many benefits to adding a table to the Blogger website. Example:-

    • It helps to increase the user experience of your website. 
    • Users can easily understand what is talking about here. 
    • Users can easily reach that part with the help of it.
    • Google will rank your website. 
    • It makes your website professional. 
    • It will make beautiful the look of your website.
    • It helps a lot in reducing the bounce rate of your website.


    Is Table Of Content Important In SEO?

    The simple answer is yes. If you add Table Of Content to your blog, your users will be able to find any information easily. By doing this, they will come back to your blog again and again and will not go anywhere else.

    And if your users are happy to see your content, then Google will trust your blog. And It will give you a high ranking.

    Is Table Of Content Important In SEO?

    If you add Table Of Content to your blog post, the Google bot will be able to easily understand your content when it comes to crawling your website. It will also improve your ranking. I hope you know how vital Table Of Content is for your blogger post.


    How to create table of contents in blogger post?

    It would help if you used HTML to add Table Of Content to Blogger's website. If you don't know to program, you don't have to worry. Because in this post, I will give you all the code. You can easily add it to your Blogger website using that code.

    Before adding a Table to Blogger, make a backup of your website template. So that you can use it if there is any problem later.

    So let's see how to add table of contents in blogger post.


    Step-01:  you need to log in to your Blogger account.

    Step-02: Now, you click on the Theme section of your Blogger Dashboard.

    how to create table of contents in blogger post

    Step-03: Click on the "Edit HTML" option. Now you can edit the Html of your blog.

    how to create a table of contents in blogger

    Step-04: Now you can double click on any space with the mouse cursor. 

    Step-05:  </head> tag Search In the blogger. If You are Using a Pc, Then Press CTRL + F. In The Mobile, Click on Side "3 Dot" In Chrome Browser, and  click On "Find My Page" Option

    how to create a table of contents in blogger

    Step-06:- Click below to copy the Html code and paste it above </head>.

    how to create a table of contents in blogger

    <script type='text/javascript'>
     //<![CDATA[
    //*************TOC plugin
    function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
    headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i <
    headlength; i++)
    {gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a>
    </li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
    //]]>
    </script>

    Step-07: Now You find "]]></b:skin>" and paste code Just Above This Code. Copy Below CSS Code.

    how to create a table of contents in blogger

    .mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px;font-family:oswald,arial;display:block;width:70%}.mbtTOC ol,.mbtTOC ul{margin:0;padding:0}.mbtTOC ul{list-style:none}.mbtTOC ol li,.mbtTOC ul li{padding:15px 0 0;margin:0 0 0 30px;font-size:15px}.mbtTOC a{color:#0080ff;text-decoration:none}.mbtTOC a:hover{text-decoration:underline}.mbtTOC button{background:#FFFFE0;font-family:oswald,arial;font-size:20px;position:relative;outline:none;cursor:pointer;border:none;color:#707037;padding:0 0 0 15px}.mbtTOC button:after{content:"\f0dc";font-family:FontAwesome;position:relative;left:10px;font-size:20px}

    Step-08: Copy <data:post.body/> tag. Then Replace  And Paste Below Given Code. 

    how to add table of contents in blogger

    <div id="post-toc"><data:post.body/></div>

    Step- 09: Now, Click Save Button!

    how to add table of contents in blogger

    Step-10: Open Any Articles where you want to create table of content and paste these codes above the heading tags. One thing is to convert in Html views then paste any code.

    how to add table of contents in blogger

    <div class="mbtTOC"> 
        <button onclick="mbtToggle()">Contents</button> 
        <ol id="mbtTOC"></ol> 
    </div>

    Step-11: Below Code Is Paste All Article In The Last Paragraph. Copy the Below Html Codes And Paste In The Articles. Now your Blog website is Completely Ready For Table of Content. And click update or publish icon.

    What is Table of Content?

    <script>mbtTOC();</script>


    Conclusion

    Whether you use WordPress or Blogger, table Of contents is essential for your website. 

    If your website has a Table Of contents, your web visitor can easily reach that specific part of the blog post.

    how to create table of contents in blogger post

    Table Of Content also helps Google crawl your blog posts. As a result, Google can easily understand how and what your content is. Which also helps in your SEO.

    In this article, do we know what is Table Of content? Why is it important? Importance of Table Of Content in SEO? And how to create table of contents in blogger post? I hope you found this helpful post. If you have any questions, Please feel free to ask in the comments area.

    Next Post Previous Post
    No Comment
    Add Comment
    comment url