How To Add Table of Content In Blogger Website.

So you need to add a table of content to your blogger website, but you want that to be smooth for website speed, then you should follow below.

Table of Content

In this piece of content, we will share how you can add a Table of content (TOC) inside the blogger post using the HTML Code. So we are going to discuss two methods, Manual and Automatic. Since the manual method does not require any JavaScript and CSS code to function, so it will not affect the loading speed of the website.

In the second method, we will use the JavaScript and CSS code to implement a Table of Content in blogger. You can choose to have anyone method. Before moving forward you can add a Bookmark to our website or subscribe to our newsletter for upcoming blogger tips.

Let us give you basic knowledge of why TOC is important for a website.

{tocify} $title={Table of Contents}

What is Table OF Content [TOC]?

TOC basically helps the reader directly jump to the specific part of the post by clicking on any TOC links they want to. It provides the heading and subheading with links to improve the overall user experiences.

SEO Advantage

When we write the Pillar content around 2000-3000 words in the blogger, It contains several heading and sub-headings. So it becomes very difficult for users to navigate around your post and understand the structure of the content.

In that case, the users these days might bounce from the website to look somewhere else due to their attention span, users usually prefer the precise solution in detail. But if your post contains a table of content which fairly easy to create even in bloggers, they will directly jump to the precise content they are looking for and need.

There are having search optimization benefits of TOC. It helps search engine bot to understand the structure of a post and if it gets crawled it will show on rich snippets in the SERPs.

Table of Content

Now user can directly navigate to the desired section from the SERPs.

How to Add Table of Content (Manually)

The most famous Table of Content for blogger javascript-based automatic table of content generates a TOC by recognizing the header tag. As you know it is javascript-based TOC which slows the loading speed of the webpage with the requirement of multiple resources and increases the size of the webpage.

Table of Content

You have to add and edit the lines of code in the post editor in HTML view. Below is the method to create your table of content.

  • STEP-1: Open the post where you want to embed TOC.
  • STEP-2: Switch to HTML view and type CTRL+F and then search for heading tags like h2,h3, etc.
  • STEP-3: You have to add a shortcode like id=“1”id=“2” on the heading tag as shown in the below screenshot.
Table of Content

  • STEP-4: Switch back to Compose view and Type all the heading in plain text as shown in the screenshot.
  • STEP-5: Select 1st heading text and click the insert link button and type #1 and apply it.
Table of Content

  • STEP-6: Now you have to Save all heading with links #2 or #3 respectively.

Now you have created the HTML TOC successfully in the post. Now if you want to customize the table of content heading by setting the table of content in Number or Bulleted list. Now publish the post with a final touch of customization. In the same way, you have to create a table of content for long and pillar content.

How to Add Table of Content (Automatically)

Automatic Method contains the adding of CSS and JavaScript file to the blogger template and then you have to paste the shortcode in every blog post where you want to display the table of content.

You can add the customized and styled TOC but it will make your website load a little bit slow. That's the reason I first told you about the manual HTML Based TOC.

Note: Before proceeding  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: Edit HTML in theme section and paste the code after the </body> tag.
Table of Content
<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();}
  • STEP-2: Paste the below CSS code just before this ]]></b:skin> 
.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.

Table of Content

<div class='toc-pro'></div>

Now paste this shortcode in every blog post where you an automatic Table of content.

CSS Code Customization

Customization of TOC can be done by simply changing the CSS code.

You can see the third line of Code which color code like #2a5365, Replace that code with any other color code

  • Go to the website htmlcolorcodes and pick any color code you want and to change the background color, change code #eee to any code, and to change the text color change this #2a5365 to any other code.
  • We can also change the text font size by changing the code font-size:14px to size like font-size:18px.
  • We can also change the padding and margin according to our needs. 


So these are two ways that we shared with you, TOC is really important for pillar or long content to improve the overall user's experience. Here you can choose any method from manual or automatic.

I would say the manual one can take small resources and does not affect the speed of the website and on the other hand the automatic version requires adding the javascript and CSS, so it can affect the speed a little. If you want to give them a feel of the WordPress site to the users then use automatic TOC other go for manual.

Ask your quires in the comment box below, you can also contact us on Twitter or LinkedIn.

About Creator- Rajat

Rajat is all about valuable content Digital marketing. He creates content on Google tech news and searches Update. You will get the latest updates about SEO and the implementation of the marketing technique leveraging the Digital Medium.

Post a Comment (0)
Previous Post Next Post