Automatically Add Table of Contents in Blogger | Blogs

Table of Contents in Blogger. Welcome to this article, We’re going to see how to add a working table of contents to a blogger site using the simple shortcode. Blogger is a big platform there are lots of limitations compared to the WordPress platform.

this code using not affect slow down your site. We present the shortcode-based automatic add table of content for the blogger site.

Advantage of our Script

This blogger script designed especially for blogger that no server loaded or third-party scripts is loaded besides the base. it only loads your entire page is loaded and other important page content is loaded first and making sure our code doesn’t hurt them.

• It’s Shortcode based
• One-Time setup
• Optimized Code for Performance
• Toggle functional
• Slightest CSS

Benefits of Table of content

Table of Contents[TOC] provides a large number of benefits for a blog like a list of the Index of your article. If your article is lengthy it would be a helpful thing for a reader to navigate between this Table of content. Download PPSSPP Games

Table of Contents in Blogger. This is boost your CTR and SEO.

SEO Benefits of TOC

There are a large number of benefits in SEO, you choose a template SEO optimized Blogger templates for your blog just like that TOC helps a lot in SEO.

All search engine always loves well detailed and well-structured blog posts and pages. by adding a TOC in Blogger Site posts, make your blog post well detailed and well-structured[user-friendly]. add a TOC[table of content] in blogger to get a good result.

Improve User Experience

According to many research by more than 82% of total web readers are scanners who only read the important points and content of a webpage. We also love to read well-detailed blog articles.

User-friendly is a very important thing to get a higher ranking on your post Page (Search Result Page [SERP ]). User-friendly is one of the important parts of our blog to rank faster. And a table of content will help you to improve the user experience of your blog post.

Table of Contents in Blogger

You have just used a shortcode. This is a one-time setup and after that, don’t have any work.

jQuery and Font Awesome are already installed in your blog, it is generally present in most of the themes and test just search for jquery and font awesome on your theme.

How to Add Table of Contents in Blogger Normal theme

Please read the instructions carefully, and always the first backup of your theme in case of any errors. This step is only for general Themes, not AMP versions.

1. Go to your blogger dashboard and click Edit HTML in the Theme panel and paste the below code after the </body> tag.

<script async='async' defer='defer'>
// TOC by Info TECH (gxfreee.com)
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Table of Contents</h4><ul style='display:block'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "content" + 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>

2. After paste the below CSS code in between <style> or <b:skin><![CDATA[ and Save or ]]></b:skin> the theme.

/* TOC by Info TECH (gxfreee.com) */
.table-of-contents{border-style:dashed;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:"\f061";padding-right:7px;}
/* For Fontaweosme 5 
.table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"\f061";padding-right:7px;}
*/

3. How this Script Works? | Table of Contents in Blogger
   1. All the head tags h1 to h5 are a call for inside the Table of content block. After that, each heading tags are inside the anchor tags and each heading is given a unique id which is also present inside the anchor tags.
   2. Some theme also include <article> tag, but Some theme not include <article> Tag, Error Occur this place. No need Next step for also include <article> tag.
   3. Add Manually <article> tag on your Theme
   4. To solve this issue simply put the inside an <data:post.body/> tag which will fix our problem

<article><data:post.body/></article>

4. After Saving your theme, then got to your blogger post editor and switch to HTML mode. Use this shortcode to which place you need to insert the Table of Contents[TOC] in any of your posts.

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

That’s all, Now need to add any other code just use the above shortcode just see your blog post Table of Contents[TOC] to appear. you are using the AMP theme skip the above section.

How to Add Table of Contents in Blogger in Blogger AMP Themes

Please read the instructions carefully, and always the first backup of your AMP theme in case of any errors. This step is only for AMP Theme, not the General theme.

1. Go to your blogger dashboard and click Edit HTML in the Theme panel and paste the below code after the </body> tag.

<b:if cond='not data:blog.isMobileRequest and data:view.isPost'>
<script>
// TOC by Info TECH (gxfreee.com)
var TOCpro=i=headlength=gethead=0;for(headlength=document.getElementById("myArticle").querySelectorAll("h2, h3, h4, h5").length,i=0;i<headlength;i++)gethead=document.getElementById("myArticle").querySelectorAll("h2, h3, h4, h5")[i].textContent,document.getElementById("myArticle").querySelectorAll("h2, h3, h4, h5")[i].setAttribute("id","point"+i),TOCpro="<li><a href='#point"+i+"'>"+gethead+"</a></li>",document.getElementById("toc-pro").innerHTML+=TOCpro;
</script>
</b:if>

2. After paste the below CSS code in between <style amp-custom='amp-custom'> and </style> Save the theme.

/* TOC by Info TECH (gxfreee.com) */
.toc{font-size:20px;font-weight:600;cursor:pointer;background-color:#edeef1;padding:7px 11px;width:fit-content;margin:15px 0}.toc:focus,.toc li:focus{outline:none}.toc svg{vertical-align:middle;width:20px;height:20px}
#toc-pro {background-color:#edeef1;margin:0;padding:0 5px 0 11px;width: fit-content;}#toc-pro a{color:#222}#toc-pro li{font-size: 15px;font-weight:400}

3. And find the article tag and add an id attribute with id='myArticle' and Save the theme.

<article class='post hentry' id='myArticle' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>

4. After Saving your theme, then got to your blogger post editor and switch to HTML mode. Use this code to which place you need to insert the Table of Contents[TOC] in any of your posts.

<div class="toc" on="tap:toc-pro.toggleVisibility" role="button" tabindex="0">
Table of Contents <svg height="18" viewbox="0 0 24 24" width="18"><path d="M12,18.17L8.83,15L7.42,16.41L12,21L16.59,16.41L15.17,15M12,5.83L15.17,9L16.58,7.59L12,3L7.41,7.59L8.83,9L12,5.83Z" fill="#000000"></path></svg>
<div hidden="hidden" id="toc-pro"></div></div>

Rectifying the Errors

These codes are tested in various themes but can’t be the same in every case. If you find any problem with your theme Please comment below and we help you.

As described in the above case where the article tag isn’t present you can add an article tag as shown in the above section. If nothing is showing after clicking the TOC this is the most probable reason.

Templateify Theme Rectifying the Errors

Many users have reported they are facing some issues, Most Popular content and author profile are inserted in this TOC content, first of all, it’s not the problem of this code. Table of Contents[TOC] call for all header tags from h1 to h5 in between and tag of content.

Fix for Templateify Themes Errors

Change the <h3> and <h2> tag to <h6> tag and change the CSS properly

HTML Section
***********************************
<h3 class='author-name'>
<a expr:alt='data:post.author.name' expr:href='data:post.author.profileUrl' target='_blank'><data:post.author.name/></a>
</h3>
----------------------------------
<div class='title-wrap related-title'>
<h3><data:allBylineItems.backlinks.label/></h3>
----------------------------------
<h2 class='entry-title'>
<a expr:href='data:post.url'><data:post.title/></a>
</h2>
----------------------------------
CSS Section
***********************************
.title-wrap > h3{float:left;font-family:var(--body-font);font-size:14px;color:$(wtitle.color);font-weight:700;text-transform:uppercase;margin:0}

Conclusion

Thank you for reading this article post, I hope that you liked this post on how to add an automatic table of contents in the blogger and helped you to add a table of content in Blogger. If so please share this article on your social media. If you find any problems or issues you can comment below.

Watch Video Tutorial