Table of Contents in Blogger 2021

• Complete Shortcode based
• One time setup
• Optimized Code for Performance
• Toggle functionality
• Minimal CSS

Benefits of TOC Pro

SEO Benefits

Table of Contents in Blogger

How to Add Table of Contents in Blogger

.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;}

*/{codeBox}

 3. After Saving you’re theme, got to your blogger post editor and switch to HTML mode. Use this shortcode to insert the TOC in any of your posts.

Final HTML Code

<div class=’toc-pro’></div>{codeBox}

That’s all, Now you don’t have to worry about any other code just use the above shortcode wherever you want the TOC to appear.

Note that you have to paste this shortcode in every post that you want to show the TOC.{alertInfo}

{getButton} $text={SEE ALSO-5 Best Blogger Templates} $icon={link} $color={#48525c}

How This Toc Plugin Works?

if you want to debug the errors or modify the script, this section would be very useful for you. Basically, our code search for an article tag which is usually present in most of the themes but I found some themes doesn’t have this tag.

All the head tags h1 to h5 are fetched inside the TOC block. After that, each heading tags are bundled inside the anchor tags where it is given a unique id which helps to identify the heading and its location.

This ID helps us to identify the section. Every heading will have an ID and anchor tags present with it, which will help it to locate the accurate positions. That’s how it works.

Post Body Elements

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}{codeBox}

Conclusion

I hope that you liked this Post on how to add an automatic table of contents in the blogger and found helpful for your blog. If so please share this article with your friends who would also be benefitted. If you find any problem or issues you can Comment omment on Comments Box.

This plugin was created by Bloginos and all credits goes to the owner of bloginos.