How to Create Multi-Level TOC in Blogger

Table of Contents, abbreviated as TOC, is often found in blogs. For WordPress, there are TOC plugins that can create multi-level tables of contents automatically without hassle, but for Blogger, such plugins are not available, meaning you have to create them manually. This is why I want to share how to create an automatic table of contents in Blogger.

Benefits of TOC

Adding a Multi-Level Table of Contents to your Blogger blog will make it easier for readers to access your content. Why? When a Table of Contents is on your blog, visitors can simply click on the links in the Table of Contents if they want to read a specific point, so readers don’t have to manually navigate up and down because there are already points they can access in the table of contents.

Adding a table of contents can also increase your SEO score because Googlebot will crawl the links that lead to the points of the blog discussion.

Why TOC?

It depends on whether you want to install it to beautify your blog with a multi-level table of contents widget or to make navigation easier for visitors. There’s no harm in trying to implement this widget.

How it Works

This code or script will take all heading tags from h2 to h4 and will extract the text from each tag. If the heading tag taken has an ID, for example:

<h2 id="lorem">Lorem Ipsum</h2>

then that ID will also be taken and used as a jump link to that heading tag. However, if there is no ID attribute in the heading taken, it will create an ID with section_1, then section_2, and so on.

How to Install

Before following the steps below, make sure to back up your current template. To implement this widget, you need to open Blogger and then enter HTML mode. See the video below on how to edit a template in HTML mode.

Now you can search for the </body> code, which is at the very bottom (you can use the shortcut CTRL+End), and copy and paste the following code above it.

<b:if cond='data:view.isPost'>
<script>
// Table of Contents. Licensed in GPL
//<![CDATA[      
if(1==toc){function $get(e){return document.querySelector(e)}function $all(e){return Array.prototype.slice.call(document.querySelectorAll(e))}function buildTOC_ul(e){var t=[document.createElement("ol"),null,null];t[0].style;var n=0,l=0;return e||(e="h2, h3, h4"),$all(e).forEach(function(e){e.id||(e.id="section_"+ ++l);for(var i="H2"==e.tagName?0:"H3"==e.tagName?1:2;n<i;n++)t[n].appendChild(t[n+1]=document.createElement("ul"));n=i;var r=document.createElement("li");r.innerHTML="<a href='#"+e.id+"'></a>",r.firstChild.innerHTML=e.innerHTML,t[n].appendChild(r)}),t[0]}function addTOC(e,t,n){void 0===t&&(t=e.firstChild);var l="",i=e.className;i&&(l="."+(-1==i.indexOf(" ")?i:i.substr(0,i.indexOf(" ")))+" ");var r=l+"h2, "+l+"h3, "+l+"h4",d=document.createElement("div");d.className=n||"sidebox my-3",d.appendChild(document.createTextNode("Contents")),d.appendChild(buildTOC_ul(r)),e.insertBefore(d,t)}var _post_=$get(".post-body");addTOC(_post_,_post_.firstChild.nextSibling.nextSibling)}
//]]>
</script>
</b:if>

To call the TOC, you can add the following code in each post.

<script>var toc=true;</script>

However, if you want every post to have a multi-level table of contents widget without calling it, you can do the following:

Find the </head> code and paste the following code right above it.

<b:if cond='data:view.isPost'><script>var
  toc=true;</script></b:if>

Note that if you want to exclude the table of contents from a post, you must apply the following code at the end of each post where you don’t want the table of contents widget to appear.

<script>var toc=false;</script>

Floating Style

If you want the multi-level table of contents to be displayed next to the text, add the following code above the </head> tag.

<style>
.sidebox {
  border: 1px dotted rgb(127, 127, 127);
  padding: 4px 3px 4px 6px; /* top right bottom left */
  min-width: 100px ! important;
  float: right ! important;
  font-size: 90%;
  margin-top: 1px;
  margin-bottom: 1px;
  margin-left: 6px;
  visibility: visible;
  max-width: 50%;
  width: 35%;
}
.sidebox ul { padding:0em 0em 0em 1.3em; margin:0em; }//TRBL
</style>

Final Words

The multi-level table of contents script is sourced from http://loyc.net/2014/javascript-toc.html. There is also a simpler version that you can see at How to Create an Automatic Table of Contents / TOC Article in Blogger

Menu