How To Add Table Of Contents in Blogger | Easy Method 2020

How To Add Table Of Contents In Blogger? - If you want to increase the rankings and traffic for your Google Blogger blog, so you must read this article at last.

If you are using Google Blogger, so you know that it does not have any feature to install Plugins on it. You have to self edit HTML to do some customization.

And also, the website or Blogs hosted on Google Blogger are less effective in terms of SEO than a WordPress blog.

Right?

If you want to increase rankings and traffic of your blog that is hosted on Blogger, so you should have to use Table Of Contents.

TOC or Table Of Contents, plays a very important role in Search Engine Optimization

Want to know How?

So, let's take a look at the Importance of Table of Contents.


Before talking about How To Add How To Add Table Of Contents In Blogger? You have to understand that Why it is important?

As every search engine wants to show the best search results to their users, search engine crawlers, crawl every website, and check the data. Crawlers also find out that the website has TOC or not.

And preference of crawlers always goes to that website that also has a Table Of Contents. However, many other things also important. But TOC also plays important role in SEO (Search Engine Optimization).

By using a Table Of Content in your Blog posts, you are ultimately giving some convenience to your blog visitors.

If any visitor visits your any Blog Posts and you are using Table Of Contents in it, so user can check in Table Of Contents that what are the topics you covered in your whole blog post.

Also if user wants to read only a particular topic, so he/she can click on that topic on Table Of Contents and can directly read that particular topic. 

So by using Table Of Contents in your blog posts not only you are optimizing your blog post for search engines but also you are making your blog posts User Friendly too.


How To Add Table Of Contents In Blogger?

As I already told you that it is very much easy to add a Table Of Contents to a WordPress blog. But in Google Blogger blog you have to self implement some codes on your site HTML.

So I will tell you some steps that How To Add Table Of Content in Blogger? In which you have to edit your HTML file.

Steps To Add Table Of Contents in Blogger -

Now, follow all the steps carefully. Don't make changes by your own. Because if you did anything wrong, your Blog won't open.

STEP - 1

First of all go to Google Blogger and login with your that account in which your Blogger blog is.

How to Add Table Of Contents In Blogger?

How To Add Table Of Contents in Blogger

STEP - 2

Then after you have to click on Theme option and then click on Edit HTML.

Add Table Of Content step 2

STEP - 3

After that press ctrl+F and search </head> tag on your theme HTML

step 3

STEP - 4

Now, paste the given code above the </head> tag carefully.


<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 anantvijaysoni.in 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>
step 4

STEP - 5

Now, again you have to press ctrl+f and search ]]></b:skin> And then paste the given code above the ]]></b:skin>



.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;}
step 6

STEP - 6

Then after you have to search this <data:post.body/>. And replace it with the given code. Note - This code can exist one or more times in your Blog theme. So replace all from the given below code.

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

STEP - 7

Work on Theme HTML is done. Now, save the template.

step 7

The work on the HTML file of the Blog is done. Now you can show a Table Of Contents in your blog post. Follow the steps to show TOC on Blog posts.

Show TOC in Blog Post

After successfully pasting all the codes in Blog HTML, you have to edit some codes in your Blog Post HTML too. Then only TOC will show in Blog Posts.

STEP - 1

After completing all the above steps. You have to select a post i which you want to add Table Of Contents. Select that post and edit it as HTML.

step 8

STEP - 2

Now, paste the given code on the blog post HTML where you want to add Table Of Contents.

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

step 9

STEP - 3

At last, you have to paste the give code at the last line of HTML code. And update your blog post. 

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

step 10

All Done! After complete all these steps. You can check that blog post in which you added the Table Of Contents. 

I hope you understand know that How To Add Table Of Contents In Blogger? It is the easiest method to add Table Of Content in Blog post. 


How To Add Table Of Contents In Blogger? (Video)


FAQs Related To How To Add Table Of Contents In Blogger? 

How To Add Table Of Contents In Blogger?

How To Add Table Of Contents In Blogger?

1

 Are table contents good for SEO?

Yes, of course. Using a Table Of Contents in a blog post can boost up your blog rankings on Google or other search engines as well. Because TOC helps the user to find out the topic they want.

2

What is purpose of table of contents?

The purpose of the Table Of Contents is to help visitors of your blog to find out the topic they want. The table of contents shows all the topics you covered in the blog post. And if any of your blog visitor wants to read any particular topic, so they can directly read that by clicking on that topic in TOC.

3

Is a Table Of Contents is necessary?

No, it is not necessary to be implemented on the blog post. But it is recommendable because using of the table of contents make your blog post user friendly as well as it helps to boost up your blog rankings.


Wrapping Up 

So bloggers, I hope you all understood that How To Add Table Of Contents In Blogger? It is not a difficult task to add TOC in blogspot blog or Blogger blog.

But you have to paste all the codes carefully, If you wrongly paste any code in the wrong place. So your blog won't open. So follow all the steps carefully.

So, that is it for today, I hope you like this article. And if yes, so please share this article with your blogger's friend. And if you want to ask anything about Blogging, or How To Add Table Of Contents in Blogger so comment below.

Happy Blogging!

2 thoughts on “How To Add Table Of Contents in Blogger | Easy Method 2020”

Leave a Comment

Share via
Copy link
Powered by Social Snap