How to add Table of Contents in Blogger 2023 Complete Step By Step

This article discusses how to add a table of contents to a blog post. When you add a table of contents to your blog or website it helps to improve your SEO which helps to rank your website or blog on search engines. This help to increase traffic to your post through SEO and make money. It also helps to increase the audience time on your website or blog. This article provides complete information about step-by-step add a table of contents.

What is a Table of Contents?

The table of Contents is similar to the widget. It is used to add on a website or blog to easily visit any topic directly in a post. Table of Contents helps to improve SEO in your blog or website post and also it looks like a professional website or blog. Make your post more attractive and beautiful. 

How to Add Table of Contents?

If you use blogger. And our website is built on a blogger platform. Then you would know. Whatever website is created on Blogger is free. That's why I tell you this. You can make a Table of Contents for free.

To create a table of contents follow these steps.

Step 1: Open any browser and search blogger in the URL and then click on the first website.

Step 2:  Select the blog that you have already created and click on the Theme option.

Step 3:  Click on Customize button and select "Edit HTML".

Step 4:  Search In the blogger </head>. If You are Using a Pc Then Press CTRL + F. In The Mobile Click on Side Three Dot In Chrome Browser and Tap On Find My Page Option

Step 5: Some HTML Code You Need To Paste Below </head> tag. Copy the Code And Paste In Below </head>.

 <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 6:   Now You Need To Search ]]></b: skin> and paste code Just Above This Code. Copy Below CSS Code. 

 .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 7: Copy the First <data: post.body/> tag. Then Replace <data: post.body/> And Paste the Below Given Code. <data: post.body/> Copy it first. Then the code given below has to be put in its place.

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

Now our Table of Contents is ready. You have to go above and save. But there is still one more last code that has to be pasted. 

Step 8:  Open Any Articles where you want to create a table of content and paste this code above the heading tags one thing is to convert in html views and then paste any code.

Please do it in HTML View while pasting any code.

<div class="mbtTOC"> 

    <button onclick="mbtToggle()">Contents</button> 

    <ol id="mbtTOC"></ol> 

    </div>

Step 9:  The below Code Is Paste All Article In The Last Paragraph.  Copy the Below Code And Paste it In The Articles. Now your Blog Is Completely Ready For a Table of Content.

<script>mbtTOC();</script>

Conclusion 

In this article, we learn a complete step-by-step process of how to add a table of contents and automate the process. Today I told you How to add a Table of Contents in Blogger 2023. I hope that you would have got a lot of help after reading the article. Share this article with your friends. And follow me on social media too.