How to Create "TABLE OF CONTENTS" in your Blogger Website

                            

How to Create Tabel of Contents in Blogger Posts 

How to Create Table of Content In Blogger,  Table of Contents Plugin in WordPress, Blogger ke Blog post par Table of Contents kay say Add Kare

Table of Contents to view a summary of all the topics included in the post. Table of Contents is also called TOC for short.

In TOC, all titles and subtitles (H1, H2, H3, H4) used in posts are displayed in the form of links in a list.

This allows readers of the post to know what topics are covered in the article.

How can you use H1, H2  in Blogger Posts ?:

If we understand the How to Create Table of Content In Bloggers for example, then you should have read a lot of books. And if you do not like reading books, you should still read during school hours. At the beginning of each book is a reference page, which chapters or articles are included in the book, and which page is easily identified.

With the help of TOC, we can easily go to any post. By looking at the articles provided in it, we can easily determine whether this article is for our work or not.

With the help of TOC, the article we want to read in the article, we can go to that topic directly. With this, the SEO of your blog is also improving and readers get a better user experience.

Benefits of Content How to Create Table of Content In Blogger? :

You should have seen the table of contents on all popular and major websites or blog articles. For example, Tables and content can be seen in all Wikipedia posts and pages. Why do they include How to Create Table of Content In Blogger, in their posts? Because there are so many benefits. Let us know what its benefits are.

This leads to the development of SEO for the blog.

There is also an advantage to search engine rankings.

The search engine also lists the post title and headings.

The article can be easily submitted.

With the help of TOC, the topic you want to read in the post can go directly to that topic.

It makes it easy for students to read and read easily.

Gives Students a Better User Experience.

The essays look professional and are very attractive in view of its structure.

Where can you put the In-List List?

ALSO READ:  What is a Favicon in a Blogger Website ?

ALSO READ:  How can you write an SEO Friendly Articles?

A table of contents is very important for long posts. You should have read a long article of words (3000 - 4000) on the Internet. Remember guys it takes some period of time to process some long posts.

In such a post, there are many points we already know about, but still, we should read the article completely, because it does not have a table of contents. If an article has a table of contents, then we can read directly the point to be made.

In that case, if you even want to list the content of your blog post, then the big question arises as to where it should be placed in the article? By the way, the TOC was placed at the beginning of the post. You can use it after the first paragraph of your post.

Also, in the post, you should use the image as an icon, also known as the feature image. So you can add a Table of contents below this image too.

You must use HTML to add a table of contents to Blogger. For this, you do not need much information about HTML. If you also know a little bit about HTML, then you can easily add table content to your blog posts.

Other than that, if you don't know HTML at all, that's fine. If you read this article carefully and follow the steps outlined, you can easily add a TOC to your blog post.

And if there is a problem or error even after that, then you can ask us with a comment. We will certainly solve all your problems, issues, and mistakes. So let's see how we can add a Table of contents to our blog post.

Step 2 - Copy & Paste CSS code :

FIRST CODE BELOW :

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/><script type='text/javascript'> //<![CDATA[ //*************Table of Content (TOC) plugin by soumyahelp.com function avsTOC() {var avsTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h3").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h3")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h3")[i].setAttribute("id", "point"+i);avsTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("avsTOC").innerHTML += avsTOC;}}function avsToggle() {var avs = document.getElementById('avsTOC');if (avs .style.display === 'none') {avs .style.display = 'block';} else {avs .style.display = 'none';}} //]]> </script>

Now guys just open "Theme section'  of your Blogger website :

● Now the HTML Editor Box will open in front of you. Click anywhere inside this box and type CTRL + F from the keyboard.

Now when you enter inside your Theme HTML just click anywhere inside the box  on blank space :

Then simply you have to press CTRL + F  as shown below in the image  Below ;

● Now inside the search box you should search it  ]]> </ b: skin>.

● You should now copy the code given below.

● and ]]> </ b: skin> paste over.

Note Please : Copy the code given Above 

 Paste this JS Code :

.avsTOC{border:5px solid #EE5535; 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%;} .avsTOC ol,.avsTOC ul {margin:0;padding:0;} .avsTOC ul {list-style:none;} .avsTOC ol li,.avsTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;} .avsTOC a{color:#EE5535;text-decoration:none;} .avsTOC a:hover{text-decoration:underline; } .avsTOC 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;} .avsTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

● Now you have to search again inside the HTML Editor Box. All you have to do is type CTRL + F from your keyboard.

● Now you have to search - </body>.

● After searching </body> you should copy the code given below.

CODE FOR EACH POST :

<div class="avsTOC"> <button onclick="avsToggle()">Contents</button> <ol id="avsTOC"></ol> </div>

● Also paste the top </body>. You can also understand by looking at the screenshot below.

Now after that, by clicking on Save Theme, save your edited theme.

 Add TOC to your blog's articles :

You have now finished setting up a list of content on your blog. Now comes the use of it. To add a table of contents to all your articles, you will need to manually paste a small HTML code into each article.

If 400 - 500 articles are written on your blog, navigating and pasting the code into all the articles will be a small challenge for you.

 Edit HTML

● First, you must be logged in to Blogger.

● Then go to Theme.

● After going to the theme, you should first back up your theme and download it to your system. So that if an error occurs it can be corrected by a backup.

Then Click on Edit HTML :

But you should do this even if it takes 2 to 3 days. Or you can just add a table of contents to your new post while publishing a new article.

But whenever you have time, then you should update the TOC in the old article. Now follow the steps given below to include TOC in your post: -

● For this, you must first open your article where you want to include the TOC.

● Then go to the HTML section of the article.

● Then copy the HTML code given below.

CODE HERE TO COPY :

<script>avsTOC();</script></div>

Also paste the code into the area where you want to add the TOC.

So this way you can easily add a Table of Contents (TOC) to every post on your blog. All you need to do is follow all the steps outlined above.

This is the Automatic Table Table setting, where all you have to do is paste this little HTML code into your post, where you want to place the TOC. Thereafter any number of titles and subtitles (H1, H2, H3, H4, H5) for your post will be displayed in the Automatic Table of Contents.

 conclusion :

So friends, now you should have known that Blogger Post Me Automatically Table of Contents Table of contents  Kaise Add Kare. By following the steps outlined above, you can easily set the table of contents (TOC) for all posts on your blogger blog.

I hope you liked this post. And you have understood all the things I have said. If you have any questions, you can ask us in reply.

Hope dear now you understand the value and importance of such tables,

Thanks