[2023] Perfect Table Of Content For Blogger Post

I showed in another post, how to add a table of contents to WordPress site posts. Today I will show you how to add the perfect table of content for blogger post.

The table of content is a big factor in the on-page SEO of a post. Whether a blogger or a wordpress site posts, a table of content is very important for both.

This feature is very easy to implement in WordPress, but a bit difficult for Blogger. That would require a developer, not that hard, you might add.

CONTENT TABLE

What is the Table of Content?

Let me illustrate by example, you have noticed the first page of almost all books. It is mentioned on this page, what is discussed on which page.

That is, you can jump to specific pages according to your needs. This is called the Table of Contents, the same for the site.

The site’s table of content contains all the headings and subheadings of a post. The visitor can jump to specific headings according to his needs.

What is the Benefit of the Table Of Contents?

The table of contents has two main advantages – one is for the visitor and the other is for the search engine. Through this, the visitor can clearly understand what is discussed in an article.

And if the visitor gets what he wants, he can jump to that paragraph. On the other hand search engines also index them in snippet form. As shown in the image below.

How to Add Perfect Table of Content for Blogger?

NOTE:- First, backup your theme code.

BODY CODE PLACEMENT

Finally, search for </body> and past below code after </body> tag,

Perfect Table of Content for Blogger Post

Code for Normally Closed Table

<script async='async'>
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>TABLE OF CONTENTES ➤➤</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>

Code for Normally Open Table

<script async='async'>
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>TABLE OF CONTENTES ➤➤</h4><ul>";$("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>

CSS CODE PLACEMENT

Next search ]]></b:skin> and just above it paste the following CSS code:

/* 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 h4{margin:0;cursor:pointer}