Table of Content in Blogger

27

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.

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.

The DIV IDs would be unique for every header tags so that we can point to a particluar tag with the same ID. Now using the <a href=”#id” /> we can scroll onto the section without manually scrolling down.

 

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.

Table of Content in AMP Blogger

AMP doesn’t support native Javascript, so there is no question about the scope of jQuery in the same. We have to design a pure Javascript based TOC by utilising the AMP elements like toggle fuctionality etc.

You can add the jQuery along with the AMP but it is loading your theme further with all AMP scripts. SO it is recommended to implement an independent TOC script.

Note that we can only avail this TOC feature in Desktop pages or else we couldn’t get valid AMP HTML. To implement this we can use the mobile tag.

Paste the below code before the </body> tag and save the theme.

[ NOTE ] Before pasting the below JavaScript please parse the code using any XML parser like this one.

<b:if cond='not data:blog.isMobileRequest and data:view.isPost'>
<script>
/* Made by bloginos.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>

Now copy the CSS code and paste below the <style amp-custom='amp-custom'>

/* AMP TOC */
.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}

After this back end configuration is done, now to insert the TOC into our post we have to insert a code. Unlike in the HTML website we cant use the shortcode here.

<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>

Thats all….the Demo shown above is already configured in an AMP theme, TOC is hidden in mobile so, it will not work in mobile.

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 blogger plugin 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.

Protect your privacy and earn money using brave browser. Be the part of brave rewards and start your earnings.

27 COMMENTS

  1. Hi bro first of all i want to thank you that your toc work for my blogger website okgoogle.co.in but it is not showing as heading then under heading all sub headings. Then again headings then sub heading. It is only showing all heading it can’t differentiate heading and sub heading. So please check my website help me to solve this.

  2. really helpful content, but there is a problem
    I hope you can resolve it. By using your code I have create TOC on my website, but I want that TOC should always open Neither on clicking it
    I hope you understand what I am want to tell, please tell me the way

    • Hi Kumar, I will update the post with AMP compatible elements. It is not a good practice to load jQuery in AMP themes, I will update with a pure JavaScript TOC.

  3. Thank you! but you need some modification in JS code, it throws an error ” Element type “headlength” must be followed by either attribute specifications, “>” or “/> “

LEAVE A REPLY

Please enter your comment!
Please enter your name here