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".
- 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 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>
- Copy the CSS code for the TOC below and paste it just above the code:
]]</b:skin>
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.
- 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.