How to add a table of content in Blogger website.[ Automatic/ Manual ]

Want to add a table of content on your blogger website but don’t want to compromise on loading speed then this blog is for you.

How to add a table of content in Blogger website

In this guide, I will show you how you can add a table of content [TOC] inside the Blogger blog post using a simple line of HTML code. So, It won’t affect the loading speed as it doesn’t require any CSS or javascript code to function the table of content.

I will also guide to add an automatic table of content in Blogger using CSS & Javascript. So, choose the manual/ automatic option according to your choice.

But, before we start if you are new to our website then you can Bookmark or subscribe to our newsletter for upcoming Blogger tips and tricks.

💡Table of Contents

  1. What is a table of content?
  2. SEO Benefits of the table of content.
  3. How to add a simple table of content in Blogger blog posts. [manual method]
  4. How to add Automatic Table of Content in Blogger
  5. Customize CSS code in Automatic TOC
  6. Conclusion

▶Let’s understand some basic things about Toc.

What is a table of content?

A table of content is basically a quick link or a jump link that helps the readers to skip to a specific part or heading with a single click. It highlights the critical section of the article in order to improve the user experience.

SEO Benefits of the table of content

When you are writing long-form content around 2000 to 3000 words with multiple headings and subheadings, it will difficult for the user to better understand the structure of the article.

As you know the attention span of readers is very low and if they found a long-form article then they will bounce back and prefer a short-form article where the solution is given precisely. But if you provide a table of content at the beginning of the blog post, they will jump to the section and get the information they need. 

There are several SEO benefits of having a table of content on the website. It helps search engine bots to better understand the article and it will display rich snippets in search results.

SEO benefits of Table of content like rich snippet

So, the user can directly skip to a particular section of the blog post right within the search result.

How to add a simple table of content in Blogger blog posts. [manual method]

Most of you heard about the javascript-based automatic table of content that generates a table of content automatically recognizing the heading tag.

But, it slows down the loading speed of web pages as it is a javascript-based method. It requires multiple resources and increases the webpage size.

That’s why I will share with you the alternate method where we will add a simple table of content without changing the coding of your blogger theme.

simple table of content in Blogger (using HTML only)

You just need to tweak some code inside the post editor using the HTML view. So, follow the step-by-step methods to create your own table of content on the Blogger website.

Step-1: Create a new post or open an existing post where you want TOC.

Step-2: Now switch to HTML view and type CTRL+F and search for heading tags like h2, h3, etc.

Step-3: Now add a shortcode like id=“1”, id=“2” on the heading tag as shown in the below screenshot.

steps to add manual table of content

Step-4: Now switch back to Compose view and copy all heading and paste in plain text as shown below.

Step-5: Now select 1st heading text and click on the link button and type #1 and save it.

steps to add manual table of content in Blogger

Step-6: Now replace all plain headings with a link like #2, #3, etc, and save it.

You have successfully created an HTML table of content in the Blogger Blog post. Now customize the table of content heading and you can set the table of content in the Number list or Bulleted list.

Now publish the post after the final check and your “table of content” is ready to use by your user.👍

In this way, you can easily create a table of content on your blogger website where posts are long and detailed.

How to add a smooth scroll effect in  manual TOC 

You can easily add a smooth scroll effect to the manual Table of content that we just added above using a CSS file. 

Just add the below CSS file to the theme editor just above the ]]></b:skin> tag or paste it in the "add CSS" section of your theme customizer. 

Copy the CSS code for smooth scroll effect

h2[id], h3[id] {
	scroll-margin-top: 40px;
}
html{
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion:reduce){
	html{
		scroll-behaviour: auto;
	}
}
Here note that this code will work for h2 and h3 tags on the page. You can further add more tags in the above CSS code by adding tags like h4[id], h5[id], etc.

If you face any problem you can ask me in the comment section or you can directly contact me on Twitter or Telegram. I will guide you in the learning process.

🎥Video Guide:

Note: You can customize your Table of content using inline CSS and Blogger editor. 

How to add Automatic Table of Content in Blogger

In this method, you have to add some CSS and javascript files to your Blogger theme and after that, you need to paste a shortcode in every blog post where you want the table of content. 

It is an easy method to add a stylish TOC but it will slow down your loading speed a little bit. That's why I recommend you to use manual HTML-based Toc.

Note: Before proceeding with the steps make sure your theme support jQuery & Font Awesome Icons. Most of the new themes (i.e templateify themes) support this. You can check this by searching the word in the HTML section of your theme. 

STEP-1: Click on Edit HTML in the theme section and paste the code just after the </body> tag.

steps to add Automatic Table of Content in Blogger(step-1)
<script async='async' defer='defer'>
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}
</script>

STEP-2: Paste the below CSS code just before the this code  ]]></b:skin>  

/* TOC by techyleaf */
.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color:#2a5365}
.table-of-contents h4{margin:0;cursor:pointer}
.table-of-contents h4:before{font-family:FontAwesome;content:"\f0c9";padding-right:7px;}
/* For Fontaweosme 5 
.table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"\f0c9";padding-right:7px;}
*/

STEP-3: Now go to the Blogger post editor and switch to HTML view and paste the below shortcode where you want to add TOC.

steps to add Automatic Table of Content in Blogger(step-3)
<div class='toc-pro'></div>

Now you have to paste the shortcode on every blog post where you want to generate the automatic table of content.

Customize CSS code in Automatic TOC

You can further customize your Table of content by changing the CSS code given in Step-2. You will see the Color code like #2a5365. So, you can replace it with your own color code. 

▶First of all, Go to the website htmlcolorcodes and pick up your color code and change the code #eee to change the background and #2a5365 to change the text color.

▶You can also increase the text size by changing the code font-size:14px to another size like font-size:18px. [ change to match your theme text size]

▶You can also easily change the padding, margin according to your need. 

Conclusion

Having a table of content in Long-form content is very useful and improves user experience. So, I have shared with you two ways of adding TOC. You can decide whether to use the manual or automatic method. 

If you ask me, I prefer to add manual TOC to my Blogger website as it is super fast and doesn't take many resources of server and load fast. 

If you like this Guide, do share it with your friends and Join our weekly newsletter in the Footer section.
Thank you.🤩

▶ Read Also: