How to Add Table of Contents in Blogger ?

There are many plugins available to add Table of Contents to posts in wordpress, But in Blogger, we don’t have such plugin feature. But then, we can easily add Table of Contents (TOC) to the Blogger Website using HTML,CSS and JS. In this article, i will guide you the easiest way to Add Table of Contents to your Blogposts. Follow the given steps to add Table of content in your Blogger/Blogspot post automatically.

SEO Benefits of adding Table of Contents for Blogger

Here are the Steps to Add SEO Friendly & Responsive Table of Contents in Blogger

There are two methods to add Table of Contents in Blogger. One is Manual Method and the other is Automatic Method

Method-1: Adding Table of Contents Automatically

Adding Code to Template/Theme

Step-1: Login in to Blogger.com and Click on Theme >> Edit HTML

Step-2: Search for </head> tag and Copy below HTML Code and Paste it just above </head> tag.

<script type='text/javascript'> //<![CDATA[ //**Adding Table of Contents to Blogger Posts 
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: Next, Search for ]]></b:skin> then Copy the below CSS code and paste it just above ]]></b:skin>

/* Table of Contents Blogger CSS */
.mbtTOC {
border: 3px solid #A2A9B1;
box-shadow: 1px 1px 0 #EDE396;
background-color: #F8F9FA;
color: #830000;
line-height: 1.4em;
margin: 30px auto;
padding: 20px 30px 20px 10px;
font-family: Open Sans, arial;
display: block;
width: 70%;
border-radius: 5px;
}
.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: none;
font-family: Open Sans, arial;
font-size: 20px;
position: relative;
outline: none;
cursor: pointer;
border: none;
color: #707037;
padding: 0 0 0 15px;
}
.mbtTOC button:after {
content: "\f022";
font-family: FontAwesome;
position: relative;
left: 10px;
font-size: 20px;
}

Step-4: Now search for <data:post.body/> and replace it with the below code.

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

Step-5: Finally, Save the template, and we have successfully added required code to the theme. Now we have to add some code in Post html to show table of contents to the visitors.

Adding Code to Post HTML

Step-6: Go to the Post and Switch to HTML Mode and Add the below code at the desired place where you want to Display Table of Contents. I mostly prefer to add Table of Content after 1st Heading or 1st Paragraph.

<div class="mbtTOC">
<button onclick="mbtToggle()">Table of Contents [Hide]</button>
<ol id="mbtTOC"></ol>
</div>

Step-7: Add below JS Code at the end of the post html.

<script>mbtTOC();</script>

Method-2: Adding Table of Contents Manually

Step-1: Login into Blogger.com and Click on Theme >> Edit HTML
Step-2: Next, Search for ]]></b:skin> and Copy the below CSS code and Paste it just above ]]></b:skin>

/* Table of Contents for Blogger CSS */
.toc {border: 3px solid #A2A9B1;background-color: #F8F9FA;display: block;line-height: 1.4em;width: 70%;display: block;padding: 20px 30px 10px;}.toc ul li {list-style-type: none;}.toc a {text-decoration: none;}.toc strong {font-size: 20px;}.toc a:hover {text-decoration: underline;}

Adding Code to Post HTML

Step-3: Go to the Post which you want to add Table of Contents and Switch to HTML Mode and Add the below code where you want to Display Table of Contents. I would recommend you to add this code at the starting of html code.

<div class="toc">
<strong>Table of Contents</strong>
<ul>
<li> <span>1.</span><a href="#point1">Heading 1</a></li>
<li> <span>2.</span><a href="#point2">Heading 2</a></li>
<ul>
<li><span>2.1.</span><a href="#sub1">first sub heading</a></li>
<li><span>2.2.</span><a href="#sub2">second sub heading</a></li>
<li><span>2.3.</span><a href="#sub3">third sub heading</a></li>
</ul>
<li><span>3.</span><a href="#point3">Heading 3</a></li>
</ul>
</div>

Step-4: Now Give ID’s to the headings that you want to include in table of contents on that post.

See Below how we gave ID for Headings and Subheadings, you need to do the same.

<h1 id="point1"> Heading 1 </h1>
<h2 id="point2"> Heading 2 </h2>
<h3 id="sub1"> first sub heading </h3>
<h3 id="sub2"> second sub heading </h3>
<h3 id="sub3"> third sub heading </h3>
<h4 id="point3"> Heading 3 </h4>

Also Read:  How to remove date from Blogger/Blogspot Post URLs ?

How to Add Table of Contents to Website in Blogger.com (Suggested Youtube Tutorial)

Advantages of Adding Table of Content in BlogPosts:

Manual Method vs Automatic Method for Adding Table of Contents

If you have basic HTML Knowledge then i would suggest you to go with manual process. Although manual method is bit time consuming but it has two major advantages:

• Better Page Loading Speed
• We can include Subtopics also

Frequently Asked Questions related to “How to Table of Contents in Blogger”

Credits: I would like to give credits to mybloggingtricks and pkbaniya

Thanks for visiting Tenowl.com. Still if you have doubts, please comment below. We definitely reply as soon possible.