How To Add Table Of Content in Blogger Blog 2022 (2 Method)

Posted on

In this context, I will show you how to add table of content (TOC) within a Blogger blog article using a simple line of HTML code. Therefore, it does not affect the loading speed as it does not require any CSS or JavaScript code to work in the table of content.

Add Table Of Content in Blogger Blog

I will also give instructions on how to add automatic tables of content on Blogger using CSS & JavaScript. So choose the manual/automatic option according to your choice.

Read More: How to Stop Country Specific URL Redirection to blogspot.com

WHAT IS A TABLE OF CONTENTS (TOC)?

A table of contents is basically a quick link or jump link that helps readers move to a specific section or title with a single click. This highlights an important part of the article to improve the user experience.

SEO BENEFITS OF TABLE OF CONTENT

When you write a long format of 2000-3000 words with multiple titles and subheadings, it will be difficult for the user to better understand the structure of the article.

As you know, readers have very little focus, and if they find a long-form article, they will go around and prefer a short-form article that gives a detailed solution. However, if you include a table of content at the beginning of a blog post, they will jump to the section and get the information they need.

Having a table of content on a website has several SEO advantages. This will help search engine robots better understand the article and show rich sections in the search results. Therefore, the user can skip certain parts of the blog article directly to the search results.

Table Of Content in Blogger Blog

Therefore, the user can skip certain parts of the blog article directly to the search results.

HOW TO ADD TABLE OF CONTENT IN BLOGGER BLOG

Most of you have heard of JavaScript-based automated content tables that create a table of contents that automatically recognizes the title tag.

However, this is a JavaScript-based method, which slows down the loading of web pages. This requires a lot of resources and increases the size of the website.

That’s why I’m going to share with you another way to add a simple content table without changing the blogger’s theme encoding.

#METHOD 01: HOW TO ADD A SIMPLE TABLE OF CONTENT ON BLOGGER BLOG POST [MANUALLY]

You just need to modify some of the code in the article editor using the HTML view. So, follow the step-by-step methods to create your content table on the Blogger website.

Step 01: Create a new article or open the TOC wherever you want.

Step 02: Now go to HTML view type CTRL+F and search for title tags like h2, h3, etc.

Step 03: Now add short codes such as id=“1”, and id=“2” to the title label as shown in the screenshot below.

Table Of Content in Blogger Blog

Step 04: Now go back to the “Create” view and copy all the titles and paste them into the plain text as shown below.

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

Table Of Content in Blogger Blog

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

You have successfully created an HTML table of contents for a Blogger blog post. Now by setting the title of the table of contents, you can set the table of contents to the list of numbers or the list with arrows.

Now, after the final verification publish your article so that your “table of content” is ready for your users to use.

This will allow you to easily create a table of contents with long, detailed articles on your blogger website.

HOW TO ADD A SMOOTH SCROLLING EFFECT ON MANUAL TOC

You can easily add a smooth scrolling effect to the added content guide using a CSS file.

All you have to do is add the CSS file below ]]></b:skin> to the theme editor on the label or download it in the “add CSS” section of the template editor.

Copy the CSS Code to Create a Smooth Scrolling Effect

h2[id], h3[id] {  scroll-margin-top: 40px;  }  html{  scroll-behavior: smooth;  }  @media (prefers-reduced-motion:reduce){  html{  scroll-behaviour: auto;  }  }  

Note here that this code will work on pages h2 and h3. You can add tags such as h4 [id], h5 [id] to the above CSS code.

If you have any problems you can ask in the comments section or contact me directly on Telegram. I will guide you through the learning process.

[Note: You can modify your table of contents using CSS and Blogger editor.]

#METHOD 02: HOW TO ADD TABLE OF CONTENT ON BLOGGER BLOG POST [AUTOMATICALY]

For this method, you need to add CSS and JavaScript files to your Blogger templates, after which you need to insert a short code for each blog post you want in the table of content.

This is an easy way to add a stylish TOC, but it will slow down your loading speed a bit. Therefore, I recommend that you use the manual HTML-based TOC.

[Note: Before proceeding with the steps, make sure that your model supports jQuery & Font Awesome Icons. Most newer models (for example, modeling models) support this. You can check this by searching for words in the HTML section of your topic.]

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

.js code:

<script async='async'>  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>  

Table Of Content in Blogger Blog
Step 02: Paste the below CSS code just before the this code ]]></b:skin>

.css code:

/* TOC BY SOFTOWE.COM */  .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 03: Now go to the Blogger post editor and switch to HTML view and paste the below short code where you want to add TOC.

.html code:

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

Table Of Content in Blogger Blog

Now you need to enter a short code for each blog post you want to create an automatic table of contents.

CUSTOMIZE CSS CODE IN AUTOMATIC TOC

You can change the Content spreadsheet by modifying the CSS code given in step 2. You will see a color code like #2a5365. So you can replace it with your own color code.

  • First go to the htmlcolorcodes website, get the color code, change the background to #eee, and change the text color to #2a5365.
  • You can also increase the font-size: 14px code to a different size, such as font-size: 18px. [modify to adjust the template text size]
  • You can also easily change the background and edge space to suit your needs.

CONCLUSION

Having a table of content in long-form content is very useful and improves the user experience. So I’ve shared with you two ways to add TOC. You can decide whether to use manual or automatic methods.

If you ask me, I prefer to add a manual TOC to my Blogger website because it’s very fast, doesn’t require a lot of server resources, and loads quickly.

If you like this guide, please share it with your friends and join our weekly newsletter in the Footer section.

Leave a Reply

Your email address will not be published.