Simple automatic table of contents plugin for Blogger blog 2020

Simple automatic table of contents plugin for Blogger blog 2020

If you are a blogger using Blogger as CMS, you probably know there is no default gadget or widget to add a table of contents. Unlike WordPress where we have many plugins available to ease customisation, to add extra features to Blogger, you will need to know some coding and editing of the Blogger XML Theme.

In today's tutorial, we will walk you through the steps of adding a simple automatic table of content plugin or widget to Bogger blogs. This Table of Contents Plugin for Blogger will help your visitors easily navigate through your articles.

How this table of contents plugin works

The script used for the creation of this TOC simply searches for all available head tags between the post content and automatically create a table of contents using them. Unfortunately, this table of contents plugin doesn't detect distinguish if the head tag was used as a sub-heading.

Benefits of a TOC

Table of contents in your blog post will facilitate navigation between different sections of the content. This is especially useful when the article is lengthy. 

Also, the table of contents will help boost your website's SEO via the "jump to link" feature. You normally see this on Google search results. And usually, the word linked is usually the keyword you visitor searched for.  Visitors can therefore easily navigate to the desired portion of your blog from the search engine.

The main topics or heading of your post with TOC are usually highlighted below the search description in Google search results as well.

Adding TOC plugin to Blogger blog

The implementation of this TOC is very simple. You do not need to be an expert in order to do it. Here are the steps to follow;

  • Start by logging into your Blogger dashboard and click on "Theme".
adding TOC to Blogger
  • On the Theme windows, click on "Edit HTM" to access your blog's template codes. This is where you will have to add the TOC CSS and JavaScript.
On this post, we will show you how to implement a Table Of Content(TOC) on your Blogger Blog that will help your readers jump from one topic on your posts to the other with great ease.
  • On the HTML code box, click inside the box, then press "CTRL + F" and search for this line of code:
<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'>";$(".post-body h2, .post-body h3").attr("id",function(arr){return "point" + arr;});$(".post-body h2,  .post-body h3").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>

adding Toc to Blogger
  • Copy the CSS code for the TOC below and paste it just above the code:
]]</b:skin>

adding TOC to Blogger
Here the CSS Code:

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


  • Next, search for the closing body tag(</body>) and then copy and paste the JavaScript code just before it.
adding TOC to Blogger
  • Save the template and exit. The next thing you would now have to do is add the div tag of the TOC where you will like it to appear. When you write your blog post until everything is ready to be published, switch to the HTML part of the blog post editor and search for the "first h2 tag" and paste the TOC div tag just above it.
  • And you are done.
  • The next thing you will want to do is to add the TOC shortcode when writing your post. To do this, simply switch to the HTML composer in Blogger post editor and pas the code below where you want the TOC to appear.
<div class="toc-pro"></div>

Customising

You can change features like the font size, colour, padding, margin and what head tag to be included in the TOC. 

As far as the JavaScript part is concerned, if you will like other blog post head tags to be included in the TOC, then simply add ".post-body h4" and ".post-body h5"  where you find ".post-body h2, .post-body h3" on the JS.