How to Add Automatic Table of Contents in Google Blogger? - Subtechz

Hey friends, in the previous article we have discussed How to Create a Free Blog using Blogger? And.

In this article, I will show you the step-by-step method to add a table of contents in your Blogger blog posts.

But before we get started, you show know what a table of content is? And it’s benefits.

What is Table of Content or TOC?

Table of contents or TOC in a blog post or article is a link list usually found on a webpage placed before or after the first paragraph. It shows the basic heading of your blog post or article which provide an idea of your post or article. 

Each link inside a table of contents takes you to a particular section of the webpage.

Benefits of adding TOC to Your Blogpost

Table of contents makes your blogpost or article well-planned and well structured. It also gives you a professional look to your blog post.

Table of Contents can also help your SEO.

When you write a lengthy article and add a Table of Contents to your article, then it makes your article well-structured and well planned.

Google also loves very detailed and well-structured articles and also considers lengthy articles as a ranking factor.

So, with the long and structured article, you increase your chance to get higher ranking in Search Engines.

 It also increases the CTR of your sites as Google displays a Jump to Section link which is crawled from the TOC and displays the most relevant part to the users.

Features of TOC Plugin

• Coded in pure JavaScript.
• Lightweight and ⚡ fast
• SEO friendly
• Automatically adds a unique ID to each section
• Contains a toggle button
• Show on any location you choose
• Easily customized
• Responsive
• Executes only when invoked

So far, we have discussed many things about the Table of Contents. Now let’s see how to add an automatic table of contents in blogger.

How to add a Table of Content in Blogger?

Without wasting your time, let’s get into the steps:

Step 1: Sign in to Blogger, then go to Theme and Click on “Edit HTML”.

Note: Before editing your HTML, you must backup your template.

Step 2: Now, find </head> and paste the following code just above the </head> tag.( Use CTRL + F to open Search Bar)

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
        
<script type='text/javascript'>              
//<![CDATA[           
//*************TOC plugin by MyBloggerTricks.com           
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>
     

Note: Make these change only if needed.

Note that there are source links to Oswald font and Font-Awesome for styling. You may or may not wish to add them. The major code is green.

The major heading tag in blogger is H2 but if you are selecting the subheading tag in blogger editor, then your default tag would be H3. If you are using the subheading tag as the main heading in your blog posts then please replace h2 with h3 thrice in the code (highlighted red) above. 

TOC plugin will not work if your heading tag is not correct.

Step 3: Now search for ]] ></b:skin> and paste the following code just above it.

/*####Automatic TOC Plugin by MyBloggerTricks####*/          
.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;}

Make these colour changes if you want to customize it to suit up with your site:

• To change the background colour of TOC box, edit #FFFFE0
• To change border colour of TOC box, edit #f7f0b8
• To change the font colour of TOC headline text, edit #707037
• To change anchor link colour, edit #0080ff
• To change the font size of anchor links, edit 15px
• To change the font size of TOC headline text edit 20px

Step 4: Next search for <data:post.body/> and replace it with the following line of code. If you find over one <data:post.body/> then replace all with the same code given below.

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

You’re done with your template and you just need to save it.

I’m sure that you have successfully added all the scripts and code and now let’s move to this.

How to activate TOC in Blogpost?

Now, in this step, we will activate the TOC plugin in our blog post. It is easy to activate it in the blog post. Each time you may want to display TOC inside a specific post, you need to follow these two steps.

Step 1: Location of TOC Container

The very first thing you need to do is to switch to the “HTML” mode of blogger editor and then paste the following line of code wherever you want to show the Table of Contents.

It is best to display the table of content after the first paragraph of your blog post or after the first heading.

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Contents</button> 
    <ol id="mbtTOC"></ol> 
    </div>

Note: You can change the text “Content” with your desired text and if your heading tag already has numbers in the beginning, then replace ol with ul.

Step 2: Activate TOC plugin

This is the last step you need to do to activate your Table of Contents in the blog post.

So, Copy the following line of codes and paste it at the very bottom where your post ends.

<script>mbtTOC();</script>

Make sure that this is the last code of your blogpost and no more code or word should be there after this in your blog post.

Now Publish your post and see the magic…

Conclusion

This tutorial is originally published by MyBloggerTrick (MBT).

I hope you have successfully created the Table of Content in your blog post.

If this tutorial helped you in creating the Table of Contents for your blogger, then please share this article and let me know how you feel after adding the TOC plugin to your blog post.

Thanks for reading this article.

Singing off Rohit Kumar.