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

How to add Table of Contents in Blogger

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 How to add a Table of Contents in Blogger/Blogspot?

If you want to attract more audience, you 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 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 Google bots with the help of a table of 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 start 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 readers, 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 with no need to add any HTML code on WordPress. You can directly add the table of content after installing the table of 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 requiring knowledge of the HTML.

There, copy my given code by following the steps then you can add the table content to 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 for SEO.

So let’s follow all my steps and add the table of content in the 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 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 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 the Table of Content headline text edit #707037
  • If you want to change the anchor link color of the 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 the 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 the Post

2.1 Choose the Table of content location

Now go to the blogger section>post>edit post and 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 your post will be showing like this you can see the 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