How To Add Table Of Contents To Blogger/blogspot Blogs - Shortcode and Manual Methods

Adding table of contents to your blog post has its own benefits. When we see WordPress blogs you can add it simply by adding some available WordPress plugin from its plugin repository to the WordPress blog, where as in Blogger (blogspot) its not possible. But don't worry there is a work around to get it done in Blogger (blogspot) blogs. Read full article or scan through headlines to know more. 

Here we will see how to add table of contents to Blogger (blogspot) blogs. But before that let's look at the benefits offered by table of contents: 

1. User friendly
2. SEO friendly
3. Easy to navigate lengthy post
4. Most of all easy to read, and digest 
5. Even lazy readers can catch up with your article 

How your blog benefits by adding Table Of Contents section in terms of SEO especially from Google search engine?

We all know that Google is the leader of all search engines. Blogs and websites get most traffic from Google. So it is important for you to optimize your blog (or website) according to Google set of rules. For example let's see how Google uses table of contents in its search results.

 

From the image you can see that Google displays jump to links and one line site links under the search results and it can result in the increase of CTR (Click Through Rate) which increases traffic to your blog (or website).

Do you think every reader reads full blog posts, especially lengthy one's? 

According to research done in US, it is found that only 21% of readers (or visitors) read full articles and remaining other 79% of readers (or visitors) only scan important points here and there. So most of the web readers just scan some points on your blog post and navigate to other websites.

If you want to target all audience (or readers) your blog needs to have table of contents displayed on your blog posts. 

Different ways of adding Table Of Contents to Blogger (blogspot) blogs: 

There are two ways of adding Table Of Contents to your blog post. One method is to add Table Of Contents using shortcode. The other method is doing it manually which means adding code to your blog post by yourself every time. 

In my opinion using shortcode is the best way but in some cases if it wont work you can always go for manual method. If you don't like manual method then you can get help for shortcode method on Bloginos website.

Benefits of Shortcode method: 

You will see working table of contents just by adding a small line of code in your Blogger (blogspot) blog post. This small code is enough to automatically show Table Of Contents on your blog post, similar to the WordPress but for that first you need to setup the Blogger template by adding required code (or scripts). 

Shortcode method uses jQuery library to add Table Of Contents to blog post. This method is one time setup and uses minimal code to make it work. 

Bloginos website has a plugin that supports AMP themes. If you need one better check this website. 

How Shortcode method works? Shortcode method works by searching article tag which is usually present in blogger template but some blogger templates it is not found. So the article tag must be around the post body tag like below 

<article>
<data:post.body/>
</article>

If this article tag is not present then shortcode method wont work. Then plugin searches for all h1 to h5 tags and surrounds them with anchor tags and displays them as Table Of Contents. 

Method #1 - Shortcode method using jQuery in Blogger template 

For this method you need to have jQuery and Font Awesome Icons, so make sure these are available inside your blogger template code. 

Before making any changes to your blogger template always make sure that you take a backup in case of any errors.

Step 1:

Select your Blogger (blogspot) blog, then click on Theme in the sidebar. Now click on Customize and select Edit HTML from dropdown. 

Step 2:

Add the following code below tab in your blogger template. 

<script async="async" defer="defer">
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>

Step 3:

Paste the following code before ]]><b:skin> tag in your blogger template.

/* TOC by MFK (bloginos.com) */
.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;}
/* For Fontaweosme 5 
.table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"\f0c9";padding-right:7px;}
*/

Step 4:

Now save your blogger template and open blog post and add the following shortcode to insert Table Of Contents. 

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

That's all. Now use this shortcode wherever you want to show Table Of Contents in your blog post.

Method #2 - (Manual Method) By adding code (or script) to Blogger template and blog posts

Before making any changes to your blogger template always make sure that you take a backup in case of any errors.

Step 1:

After login, select your Blogger (blogspot) blog at the top, then click on the Theme option in the sidebar and then click on Edit HTML in the dropdown.

Step 2:

Find in the blogger template and paste the following code above it.

<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"></link> 

<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css"></link> 

<script type="text/javascript"> 

//<![CDATA[ 

function mbtTOC() {var mbtTOC=i=headlength=gethead=0; headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++) {gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}} //]]> </script>

Step 3:

Find ]]><b:skin> in your blogger template and paste the following code above it. 

.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}           
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}           
.mbtTOC ul {list-style:none;}           
.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}           
.mbtTOC a{color:#0080ff;text-decoration:none;}           
.mbtTOC a:hover{text-decoration:underline; }

        
.mbtTOC button{background:#FFFFE0; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#707037;padding:0 0 0 15px;}           

.mbtTOC button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

Step 4:

Find <data:post.body/> in your blogger template and replace it with the following code. For some blogger templates you will find <data:post.body/> more than once, then in that case you have to replace all the instances in your blogger template.

<div id="post-toc"><data:post.body/></div>

Step 5:

Now you need to add some HTML code to blog post. Navigate to blog post where you want to show table of contents and select HTML view instead of Compose view.

<div class="mbtTOC"> 
<button onclick="mbtToggle()">Table Of Contents</button> 
<ul id="mbtTOC"></ul> 
</div>

Step 6:

Add the following code at the end of the post in HTML view.

<script>mbtTOC();</script>

Now you will see Table Of Contents in that post. You need to add this code to each post manually in your Blogger (blogspot) blog to see Table Of Contents. 

Make use of Post Template instead of manually adding code each time to Post Editor.

If you paste the code in Post Template present in settings then you don't have to copy paste each and every time in post editor. 

You can navigate to Settings > Posts, Comments and Sharing in the sidebar. On the right side scroll to Posts section there you will find Post Template.