Table of Content in Blogger

5

Table of Content in BloggerIntroducing the first shortcode based table of content in blogger with the clickable element and optimized javascript. No need to worry about Javascript and HTML just configure it and use the shortcode that’s all.

A long article will be very difficult to read and moreover, nobody has the time to patiently read a long article. There comes the use of TOC (Table of Content) which helps readers to get an overview of your article.

Also Read – Top 5 Mobile Friendly Blogger Template Free

Table of Content in Blogger

When we are going to write a detailed article on something it is very important to add a TOC in our article. Which not only help the user but also helps in ranking and improve click-through rates (CTR).

So you might be wondering how it will help in SEO, I will share some of my findings and lets check will it be useful for our blog or not.

Demo

Table of Contents Widget for Blogger?

Many of the users leave blogger platform just because they can’t find some features that WordPress have like plugin support, customization, etc.

This code is entirely programmed by myself with an aim to improve blogger CMS to match (at least a little bit of it) with WordPress features.

Now let’s go straight away to the tutorial!

How to Add Table of Contents in Blogger Post

Please follow all the steps carefully and make sure that you have taken a backup of your theme. Before that make sure that font awesome is already installed in your theme if it’s not installed follow this thread and configure it.

Please, note that this code needs jquery so if your blog doesn’t have jquery make sure that you have already installed it. Don’t worry most of the themes have it already.

1. Paste the CSS above the ]]></b:skin> tag.

/* 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}
.table-of-contents h4:before{font-family:FontAwesome;content:"\f0c9";padding-right:7px;}

2. Paste the Javascript above the </body> tag and click Save

<script async='async' defer='defer'>
/* Made by MFK bloginos.com */
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>

3. That’s all now Just go to your post and select the position where you want to show the TOC and Goto the HTML view and Paste it the Shortcode.

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

TOC is usually configured after the first paragraph so, paste before the <h2> tag or any other location without any space

toc in blogger

After the initial configuration, you don’t need to add any other code just use the shortcode and enjoy the plugin!

Editing the Plugin

You can change all the settings like color, font-size, padding, and margin to fit your theme. Just got to the CSS section and replace the values with your value.

You can use the chrome’s inspect element tool to do this without any difficulties.

How the TOC Plugin Works

We utilize the Javascript to fetch all the H1, H2, H3, etc tags from in between <article> and </article> and pre-assign a unique DIV ID corresponding to the Head tags.

We use the DIV IDs to navigate to the particular sections.

Problems after Installing the Plugin

In the above section, I have explained how this plugin works. In some themes, various data like author name, widget name, etc would be given head tags so, this tag also will be fetched into our TOC content.

How to Solve the Problems

In order to solve this, you will need to reassign the widgets and remove its head tags and assign span or other element but you should take care of the CSS too.

Copy all the CSS associated with the element Eg. widget h1{widget H1 CSS here} and Change it to widget span{widget H1 CSS here}.If you find it difficult to fix just contact me

My Website Performance with TOC Plugin

We all know that TOC plugin has huge benefits in SEO but does this plugin offer the same in blogger?

Yes! I have been running this plugin for about a quite long time and i find it very useful in the google search results.

Google’s One line Sitelinks

One line sitelinks are very helpful for improving your click-through rates and thereby improving your SEO and earnings. I have two blogs one in blogger and this one in WordPress.

You can see the search result for a keyword here for my blogger website.

one line sitelink

Google’s “Jump To” Links

Jump to links are another useful feature with the TOC plugin which helps the users to navigate directly to the section just from the search result.

Therefore the users don’t need to scroll down to the section.

jump links

Conclusion

I Hope that this article on “Table of Content in Blogger” helped you to insert a shortcode based TOC widget for your blog.

If you found this article helpful, Please comment your valuable suggestion, Share and Subscribe our blog for upcoming tutorial and guides.

5 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here