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

How to add Table of Content in Blogger/Blogspot?

How to add Table of Content in Blogger/Blogspot?

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

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

If the Content is king So SEO is the Queen of that king. o that both SEO and content are more important to rank the website. If your SEO is good to so are lots of chances to ranking the website also content should be of good quality and unique.

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

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

So today I will share with you how to add Table of Content 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 Content

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

table-of-content-blog

Why important is the Table of Content

For a blogger, the reader is god for a blogger. Because of reader bloggers earn money. so a user should be added the table of content on the blogger. It’s part of SEO its helps to the ranking of the website and also helps Google to understand the blog content.

How to add Table of Content in Blogger

In WordPress, we can easily add the content of the table no need any to add any type of HTML code on WordPress. You can directly add the table of content after installation of 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 required knowledge of the HTML.

There just 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 personally suggest to Guys if you have written a short-term post there is no required table of content so don’t wasting your time if 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 go to follow my all steps and add the table of content in blogger within a minute.

NOTE:- Please before adding any code on the blogger theme take a backup of your theme.

Step 1:-  First of all login to your blogger and go to the theme then back up the theme.

backup-the-blogger-them

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

blogger-theme-section

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.

place-the-code-of-before-html

<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

place-the-code-of-table-size

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

table-of-content-last-code

<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 now change the compose view into HTML view.  I want to table of content is look 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
How to add Table of Content in Blogger
<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 tat the below of 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 showing like thisTable-of-content-TOC-Example

If you have any suggestions so please share your suggestion 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