Home Blogging tips and tricks How To Add Table Of Contents In Blogger Post

Blogging tips and tricks

How To Add Table Of Contents In Blogger Post

January 25, 2021 Modified date: July 1, 2024

How To Add Responsive Table Of Content In Blogger

Hello, bloggers In this post I will share “How To Add Responsive Table Of Contents To Bloggger Post”.So if your website is hosted on google blog i.e blogger.com then follow this post thoroughly.

Contents hide

1 What Is Table Of Contents:

2 Advantage Of Table Of Contents:

3 Why Blogspot:

4 How To Add Responsive Table Of Contents In Blogspot’s Post:

4.1 Add Table Of Content Codes In Blogger Theme:

4.1.1 CSS Stylesheet For Single Level Table Of Contents

4.1.2 CSS Stylesheet For Multi-Level Table Of Contents

4.1.3 JavaScript For Single Level Table Of Contents

4.1.4 JavaScript For Multi-Level Table Of Contents

4.2 Show Table Of Contents In Blogger Post:

4.2.1 Call In Code For Single Level Table Of Contents

4.2.2 Call In Code For Multi-Level Table Of Contents

4.2.3 For Single Level Table Of Contents

4.2.4 For Multi-Level Table Of Contents

5 How To Customize Table Of Contents:

5.1 Single Level Table Of Contents:

5.2 Multi-Level Table Of Contents:

What Is Table Of Contents:

You may already see that every book has a printed table of contents at the starting. Usually, the printed table of content includes titles or first-level headings with page numbers. The main purpose of it is to make the reader easier to find into a particular chapter or topics.
Table of contents for blogger post is also similar which is the list of all first-level headings and sub-headings of your article. However, unlike a printed table of content, the digital table of contents offers links to navigate between the topics.
Digital table of contents can be either single or multi-level.
Single level table of contents is a list of all headings. Whereas, the multi-level table of contents is a detail one as it contains heading and sub-heading together in nested form.
But why you need the table of contents for your blogger post?

Advantage Of Table Of Contents:

You may already get that, table of content will surely enhance the user-experience as it makes your reader easy to navigate throughout your post. However, the table of content also has another two big SEO related advantages those are:

Table of content can make your article organized and you know what! Google SEO algorithm loves it. So the table of content helps your blog post to rank at the top of the Google search.
Also, if you use the table of content then Google will index and show your website on Google’s Featured Snippet Search Box.

So eventually table of content can give you an additional boost to your blog post in terms of both user-experience and traffic.

Why Blogspot:

Advance CMS like WordPress, Joomla, Drupal, etc. have lots of downloadable plugins for the table of contents. Therefore, these CMS users don’t have to do more for adding the table of contents on their post. However, Blogspot does not has such plugins. Hence they need the codes for the table of contents and have to follow a certain process to show the table of contents on their blogger post.
In this post, I will provide the codes for the responsive table of contents and also describe the implementation process on your blog post. Finally, I will also show you how you can customize the table of contents as well.
So without any delay lets get into the main part of this article.

How To Add Responsive Table Of Contents In Blogspot’s Post:

You already know that Blogspot doesn’t have any plugins for the table of contents, so you have to add some codes manually to use this table of contents on your blogger post. This process includes two steps, those are

Add the CSS stylesheet and javascript in your Blogger theme
Add call-in code in order to show the table of contents on your blog post.

Note: Though here I will provide the codes for two different types of table of contents i.e, single and multi-level table of contents but the process are same only codes are different.

Add Table Of Content Codes In Blogger Theme:

I made up this table of contents using CSS and javaScript and you have to add those CSS and javascript inside the blogger theme that you used.
To add CSS stylesheet in your blogger theme

Open and log in your Blogspot account.
Click on Theme > CUSTOMIZE > Edit HTML (Take a Backup if you want)
Click anywhere on the blogger HTML editor and then press “Ctrl + F” and then find ]]></b:skin>
Now paste the below code just above ]]></b:skin>

CSS Stylesheet For Single Level Table Of Contents

.mbtTOC1{
border:2px solid #000000;
border-style:dashed;
background-color:#FFFFE0;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
 display: block;width: 70%;}           
.mbtTOC1 ol,.mbtTOC1 ul {margin:0;padding:0;}           
.mbtTOC1 ul {list-style:none;}           
.mbtTOC1 ol li,.mbtTOC1 ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:18px;color:#fc0f2b;}           
.mbtTOC1 a{color:#fc0fcd;text-decoration:none;font-family:Acme;font-size:20px;text-transform:capitalize;}           
.mbtTOC1 a:hover{text-decoration:underline;color:#fc0f2b; }
.mbtTOC1 button{background-color:transparent;font-family:oswald, arial; font-size:25px;position:relative; outline:none;cursor:pointer; border:none; color:#0fb5fc;padding:0 0 0 15px;}           
.mbtTOC1 button:after{content: "\f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}

CSS Stylesheet For Multi-Level Table Of Contents

.mbtTOC{
border:2px solid #000000;
border-style:solid;
border-style:dashed;
background-color:#FFFFE0;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
 display: block;width: 70%;
 }
 
 .mbtTOC button{
 background-color:transparent;
 font-family:Acme;
 font-size:25px;
font-weight:bold;
 position:relative;
 outline:none;
 border:none;
 color:#0fb5fc;
 padding:0 0 0 15px;
 }
 
 .mbtTOC button a {
 color:#3d1818;
 padding:0px 2px;
 cursor:pointer;
 } 
 
.mbtTOC button a:hover{
 text-decoration:underline;
color:#fc0f2b; 
 } 
 
.mbtTOC button span {
font-size:15px; margin:0px 10px;
 }

.mbtTOC li{margin:10px 0;  } 

.mbtTOC li a {
color:#3d1818;
 text-decoration:none;
 font-size:18px;
 text-transform:capitalize;
font-family:georgia;
 } 
 
.mbtTOC li a:hover {
text-decoration: underline;
color:#fc0f2b;
}
.mbtTOC li li {margin:4px 0px;}
 
.mbtTOC li li a{
 color:#fc0f2b;
 font-size:15px;
 }
.mbtTOC li li a:hover{
 text-decoration: underline;
color:#fc0f2b;
 }

.mbtTOC ol{counter-reset:section1;list-style:none}
.mbtTOC ol ol{counter-reset:section2}
.mbtTOC ol ol ol{counter-reset:section3}
.mbtTOC ol ol ol ol{counter-reset:section4}
.mbtTOC ol ol ol ol ol{counter-reset:section5}
.mbtTOC li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px;color:#fc0f2b;font-family:arial;}
.mbtTOC li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px;color:#fc0f2b;font-family:arial;}
.mbtTOC li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}
.mbtTOC li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}
.mbtTOC li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}

Now to add javaScript, find </head> tag and add paste the given code above </head> tag

JavaScript For Single Level Table Of Contents

<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[                      
//*************Single Level Table Of Content By www.gettechsupport.in 
function mbtTOC1() {var mbtTOC1=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);mbtTOC1 = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC1").innerHTML += mbtTOC1;}}function mbtToggle1() {var mbt = document.getElementById('mbtTOC1');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}           
//]]>              
</script>

JavaScript For Multi-Level Table Of Contents

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'> 
//<![CDATA[ 
//*************Multi-Level Table Of Content By www.gettechsupport.in 
function mbtTOC(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC").innerHTML+=c}function mbtToggle(){var a=document.getElementById("mbtTOC"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")} 
//]]> 
</script>

And finally, find and replace the <data:post.body/> by (This code is same for both single and multi level table of contents)

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

Once you complete all the above steps click on Save icon and then go back. You are now ready to show the table of contents in your blog post.

Show Table Of Contents In Blogger Post:

To show the table of content in your post you have to add a call in code in the post, for this

Go to blogger and open the post where you want to use the table of contents.
Open the post as HTML view
Now copy the below code and paste it where you want to put the table of contents or above the first headings of the article.

Call In Code For Single Level Table Of Contents

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

    </div>

Call In Code For Multi-Level Table Of Contents

<button>Table Of Contents <span>[<a onclick="mbtToggle()"  id="Tog">hide</a>]</span></button> 
<div id="mbtTOC"></div> 
</div>

Then again paste the below code at the very last of your post.

For Single Level Table Of Contents

<script>mbtTOC1();</script>

For Multi-Level Table Of Contents

<script>mbtTOC();</script>

Once you are done with this save the post and publish it.

How To Customize Table Of Contents:

If you want to change the background colour, text colour or border then find the below hex colour code from the CSS stylesheet and replace it as you want

Single Level Table Of Contents:

Border Color: #000000
Background Color: #FFFFE0

Border-Style: dashed

Heading Text Color: #0fb5fc

Text-Color: #fc0fcd

Bullet-Color: #fc0f2b

Hover-Color: #fc0f2b

Multi-Level Table Of Contents: