How-to-add-Table-of-Content-in-Blogger (1)

How to add Table of Contents in Blogger/Blogspot?

How to add Table of Contents in Blogger/Blogspot?

Hey, Guys. Hope You are Fine on these crazy days. If you have issues so can share the comments in the below section. So today, we will discuss the How to add “Table of Contents” in Blogger/Blogspot?

If you want to attract more audience, we need to write good content, but only content does not matter for ranking the keywords also matter the SEO.

Suppose the content is king; SEO is the Queen of that king. So that both SEO and content are more important to rank the website, if your SEO is good to so are lots of chances to rank the website, content should be of good quality and unique.

So today, I share with you a more important part of SEO writing a Table of contents. Yes, the table of contents is part of SEO, which helps the user make it easier to find information in the document based on title and page number.

TABLE OF CONTENTs is also helping to Google bot with the help of table on content google can easily understand the main keywords you want to rank.

So today, I will share how to add a Table of Contents in Blogger. In blogger, we can’t add them directly. We need to add some HTML code in case of a logger, but in WordPress, we can directly install the plugin and get a table of content anywhere.

What Table of Contents?

It is headed and simplifies the blog’s content and abbreviates informally as TOC. It’s mostly found at the starting of the blog, which helps the user with the blog’s content. If you click on any link to the table of content, it will send/jump to a specific section or topic..-

add -Table-of-Contents-in-Blogger

Why important is the table of content For bloggers?

For a blogger, the reader is god. Because of reader bloggers earn money. So a user should be adding the table of content on the blogger. Its part of SEO helps the website’s ranking and helps Google understand the blog content.

How to Add Table of Contents in blogger

In WordPress, we can easily add the table’s content no need to add any HTML code on WordPress. You can directly add the table of content after installing the table of the content plugin in WordPress.

Adding the table of content is not a big task. It’s very simple to add in the blogger, but you have to add some HTML code in the blogger theme.HTML code add means not require knowledge of the HTML.

There, copy my given code by following the steps then you can add the table content on the blogger post. But you have to add manually add the code on every post.

But I suggest to Guys that if you have written a short-term post, there is no required table of contents, so don’t waste your time if you try to add in the short post. Yes, you can add the Long post. It’s very helpful for the user as well as SEO.

So let’s follow all my steps and add the table of content in blogger within a minute.

NOTE: Before adding any code on the blogger theme, take a backup of your theme.

Step 1:- First, log in to your blogger and go to the theme, then back up the theme.

login-1

Step2:-Now again click on theme > Edit HTML section and go to the HTML section.

login-1

Step 3:- Then Search the </head> tag after that Press the enter and down the </head>  and below the </head> paste the below code and then save the theme.

step3

 

<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 all4techs.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>

Step 4:- Now again press the ctrl+F and paste this code  ]]></b:skin>  and press the Enter. After that  paste, the below code above this code ]]></b:skin> and save them

step4-1

 

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

If want to change the colure and margin and Px so can use the below mention code.

  • If you want to change the background color of the Table of Content box edit #FFFFE0
  • If you want to change the border color of the Table of Content box edit #EE5535
  • If you want to change the font color of Table of Content headline text edit #707037
  • If you want to change the anchor link color of Table of Content edit #0080ff
  • If you want to change the font size of anchor links edit 15px
  • If you want to change the font size of Table of Content Headline text edit 20px
If you have any issues so you can contact me any time other than you can join my Telegram group.

Step no:-5 This is the last step of the theme now then press ctrl+f and search the <data: post.body/> and replace the below code with this code.

last

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

2. Add Table of Content in Post

2.1 Choose the Table of content location

Now go to the blogger section>post>edit post change the compose view into HTML view. I want the table of content looks, so add the HTML code before the First H2 Tag. You can change as per your choice.

Place-code-to-show-the-table-of-content-in-your-blogger-blog

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

2.2 Add the code at the end of the blog.

Paste the code below the content and save the post then you post will be showing like this you can see below post screenshot.

Place-code-at-the-end-of-blog

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

After following all the steps you post content of the table will be shown like this

add Table of Contents in Blogger

If you have any suggestions, please share your suggestions in the comments section. Thanks for reading till the end.

Also, Read:-

How to Add Contact Form in Blogger

How to Add Reaction Bar Buttons in Blogger and WordPress

How to Add Google Sitemap to Blogger