We are also on YouTube! Subscribe

How To Add Table Of Content in Blogger? Automatic - Manual

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello Everyone! Welcome Back to TechiFeed. I have written a new informative post for you to read. So, Keep reading to find out more!

Adding a table of contents to each post is essential for SEO purposes, but it also makes it easier for readers to navigate through your content. 

How To Add TOC in Blogger

This tutorial will show you how to create a simple table of contents using HTML code.

Table Of Content in Blogger

The table of contents is a great way to organize your blog posts. You can create a list of all your articles and add a link to each one. It will help visitors find the information they need quickly.

Benefits of the table of contents

The table of contents is a great way to organize your blog posts. You can use it to highlight essential post sections, so your readers know where to start reading.

When you write long-form content of 2000 to 3000 words with several headings and subheadings, the user will need help comprehending the structure of the post.

Readers' attention spans are short; if they see a long-form article, they will bounce back and prefer a short-form piece with a specific solution. 

However, if you provide a table of contents at the top of the blog post, people can skip to the part and acquire the information they want.

There are various SEO advantages to including a table of contents on your website. It aids search engine bots in understanding the article and displays rich snippets in search results.

Consequently, the user can quickly jump to a specific section of the blog article inside the search result.

How To Add A Simple Table Of Content To Your Blog Posts

Most of you have heard of the JavaScript-based automated table of content, which creates a table based on the heading tag.

However, because it is a JavaScript-based technique, it slows down the loading speed of web pages. It necessitates the use of many resources and increases the size of the webpage.

That is why I will show you another approach for adding a simple table of content without modifying the coding of your blogger theme.

You only need to modify some code within the post editor's HTML view. So, on the Blogger website, follow the step-by-step instructions to construct your table of content.

Step 1: Make a new post or edit an old one to include the TOC.

Step 2: Switch to HTML view and press CTRL+F to search for header tags such as h2, h2, etc.

Step 3: Now, on the heading tag, put Shortcodes like id=1 and id=2.

Step 4: Return to the Compose view, copy all headings, and paste them into plain text, as shown below.

Step 5: Now, choose the first heading text, click the link, write #1, and save it.

Step 6: Replace all plain headers with links like #2, #3, and so on, and save it.

In the Blogger Blog post, you have successfully generated an HTML table of content

You may now edit the table of content header and configure the table of content in either the Number list or the Bulleted list.

After the last check, publish the article, and your "table of content" is available for your user.

You may quickly develop a table of content on your blogger website if your posts are extensive in this manner.

How to Implement a Smooth Scrolling Effect in a Manual TOC

Using a CSS file, you can quickly add a smooth scroll effect to the manual Table of Contents we just added above.

Add the CSS file below to the theme editor immediately above the ]]>/b: skin> tag, or put it into your theme customizer's "add CSS" area.

Copy the CSS code to get the smooth scroll effect.
	scroll-margin-top: 40px;
	scroll-behavior: smooth;
@media (prefers-reduced-motion:reduce){
		scroll-behaviour: auto;
Note that this code will function for the page's h2 and h2 tags. You may add extra tags to the above CSS code by using labels like h3[id], h5[id], and so on.

How to Add Automatic Table of Content Blogger

In this approach, you must first add specific CSS and JavaScript files to your Blogger theme before pasting a Shortcode into each blog post where you want the table of contents.

It is a simple way to add an excellent TOC, but it will slow down your loading performance. As a result, I propose that you utilize manual HTML-based Toc.

Before you begin, ensure your theme supports jQuery and Font Awesome Icons. The majority of new themes (i.e., templatify themes) support this. 

You may test this by searching for the word in your theme's HTML section.

Step 1: In the theme section, click Edit HTML and paste the code directly after the </body> tag.
<script async='async'>
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h3 onclick='toc()'>➡️Table of Contents</h3><ul style='display:none'>";$("article h2, article h2, article h3, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h2, article h3, 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 CSS code below directly before this code ]]></b:skin>
/* TOC */
.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 h3{margin:0;cursor:pointer}
Step 3: Now, in the Blogger post editor, switch to HTML view and paste the shortcode below where you want to put the TOC.
<div class='toc-pro'></div>
You must now insert the Shortcodes into each blog post where you want the automated table of content to appear.

Customize the CSS code in the Automatic TOC

You may further personalize your Table of Contents by modifying the CSS code provided in Step 2. The color code will be something like #2a5365. As a result, you can substitute your color code.

To begin, visit the website's HTML color codes and select your color code. Change the code #eee to alter the background color and #2a5365 to change the text color.

To raise the text size, you may also change the code font size from 14px to another size, such as 18px. [adjust the text size to match your theme]

You may also easily modify the padding and margin to suit your needs.

Video Tutorial

Frequently Asked Questions

What is a Table of Contents in a Blogger blog?

A Table of Contents, or TOC, is a list of the headings and subheadings in a blog post, usually found at the beginning of the post, that allows readers to quickly navigate the post and jump to the section they are most interested in.

How do I add a Table of Contents to my Blogger blog?

You can add a Table of Contents to your Blogger blog using the built-in TOC widget, which can be found in the "Layout" section of your blog's dashboard. You can also use third-party TOC plugins or widgets to add a TOC to your blog.

Can I customize the appearance of my Table of Contents?

Yes, most TOC widgets and plugins allow you to customize the appearance of your TOC, including font size, color, and style.

How do I update my Table of Contents when I add or remove headings in my blog post?

Most TOC widgets and plugins will automatically update when you add or remove headings in your blog post. However, some may require you to manually update the TOC to reflect the changes in the post.

Can I add a Table of Contents to multiple blog posts at once?

Yes, you can use the TOC widget or plugin to add a TOC to multiple blog posts. Some plugins also allow you to apply TOC to all posts simultaneously.

Can I add a Table of Contents to my homepage?

It depends on the theme and widgets you are using. Some widgets and plugins allow you to add TOC to the homepage. But it's not a standard feature.

Can I add a Table of Contents to my pages?

It depends on the theme and widgets you are using. Some widgets and plugins allow you to add TOC to pages as well. But it's not a standard feature.

Stay Connected

I hope you liked the above informative content. Please share this post and follow our blog for more great content.

If you have any questions or problems, feel free to ask in the comments section.

© Copyright: TechiFeed

About the Author

Hi, I am a good student and a part-time blogger.

Post a Comment

To avoid SPAM, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser. The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.