How to Apply Automatic TOC in Blogger Posts - How to Automatically Create Table of Contents in Blogger Posts (DLE)

THIS POST WAS CREATED BY: VINAY YADAV

Trust yourself that you can do it and get it

Today in this article we will learn how to put a table of content in our blog post.

You should also be told about the Table of Content if you are a blogger. Today we will know what a Table of Contents is. What are its benefits? And how to implement it in your blog?

If we add the table of content to our article, then our blog gets a lot of benefit from it. And also the visitors coming to our blog get a lot of help.

If we put a table of content at the beginning of all our articles whether long articles or short articles, then the readers get to know which topic is covered in the post.

Advantages of Table of Contents (TOC)?

You must have seen the table of content in the articles of all popular and big websites or blogs. For example, a Table of Content is definitely seen in all the posts and pages of Wikipedia. Why do they put TOC in their posts? Because it has many benefits. Let us know what are its benefits.

• This leads to SEO Improvement of the blog.
• There is also an advantage in the ranking of search engines.
• Along with the post title, the headings and subheadings also rank in the search engine.
• The article can be navigated easily.
• With the help of TOC, you can go directly to the topic which you want to study in the post.
• Makes readers simple and easy-to-read articles.
• Gives a good User Experience to the readers.
• Articles look more professional and attractive with their Structure Overview

Where to put Table of Contents in the post?

 A table of content is very important for long posts. You must have read long articles of (3000 - 4000) words on the Internet. It takes more time to read such a long post.

In such a situation, there are many such points in the post about which we already know, but still, we have to read the article completely because there is no table of content in it. If the article has a table of contents, then we can directly read the point which we have to read.

In such a situation, if you also want to put a table of content in your blog post, then a big question arises where should it be placed in the article? By the way, TOC is applied at the beginning of the post. You can put it after the first paragraph of your post.

As part of this, in the post, you must have used a photo as a thumbnail, which is also called a featured image. So you can add TOC under that photo also.

How to add Table of Contents (TOC) in Blogger Post with practical?

To add a table of content on Blogger, you have to use HTML. For this, you do not need much knowledge of HTML. If you know even a little basic HTML, then you can easily add a table of content to your blog post.

Apart from this, even if you do not know HTML at all, then it does not matter. Even if you read this article thoroughly and follow the steps mentioned, you can easily add TOC to your blog post.

And if there is any issue or error even after that, then you can ask us through a comment. We will definitely solve all your problems, issues, and errors. So let's know how to add TOC to your blog post.

STEP 1 GO THEME AND CUSTOM THEN EDIT HTML

1) Copy and Paste above </head> tag in your HTML Code of 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>

 2) Search ]]></b:skin> code and just above it paste the following 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}

Now after this you save your edited theme by clicking on Save Theme.

3) Search for <data:post.body/> and replace it with the code below:

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

 

4) Goto your blogger post. Then switch to "HTML" mode and then paste the following HTML code just before the first heading.

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

5) Paste this code in the Html view of your blogger post in the last.

<script>mbtTOC();</script>

So in this way you can easily add Table of Contents (TOC) to every post of your blog. All you have to do is follow all the steps mentioned above thoroughly.

This is a setup of Automatic Table of Contents, in which all you have to do is paste this little HTML key code on your post, where you want to place the TOC. After that, all the Headings and 

Subheadings (H1, H2, H3, H4, H5) in your post will start showing in the Automatic Table of Contents.

CONCLUSION

So friends, now you must have known that Blogger Post Me Automatically Table of Contents (TOC) Kaise Add Kare. By following the steps mentioned above, you can easily put a Table of Contents (TOC) in all the posts on your Blogger blog.

I hope you liked the post. And you must have understood all the things I have told. If you still have any questions in your mind, then you can ask us by commenting.

If you liked the post then please do share this post with all your friends on social media. Apart from this, by following THG, you can get information about all new posts continuously.