How To Add Table Of Contents In Blogger Post

Add table of contents in blogger post
Table Of Contents

Introduction

Today in this post we learn that how we add Table of Contents in Blogger Post. Its very important for Good ranking and also Good for SEO. So this is very important for all bloggers.

If you are a user of blogger and have a website in blogger so of course you know that there no plugin will come in Blogger, So we have to put codes manually to add Table of Contents. So Lets starts.

How To Add Table Of Contents In Blogger


Steps to create TOC

  1. Go to blogger dash board
  2. Go to Edit HTML
  3. Then search </head>
  4. After that Copy the following code and paste above </head>
<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[
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>

  1. After that search  ]]></b:skin>
  2. And copy the following code and paste above ]]></b:skin>
.mbtTOC{border:5px dashed dodgerblue;box-shadow:2px 0px 10px 4px silver;background-color:#f2f2f2;color:black;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:#f2f2f2; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:black;padding:0 0 0 15px;}
.mbtTOC button:after{font-family:FontAwesome; position:relative; left:10px; font-size:20px;}


  1. After That search <data:post.body/>
Note:- If you found more than one code then simply replace the codes with following codes

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

  1. After Doing all steps just save the theme
  2. Go to Blogger Dash board
  3. Choose the post
  4. Open HTML View
  5. Choose the right place to show TOC
  6. Copy the Code and paste those place
<div class="mbtTOC"> 
<button onclick="mbtToggle()">Table Of Contents ✓</button>
<ul id="mbtTOC"></ul>
</div>

  1. After that scroll down the post
  2. Make sure the post is in HTML view
  3. Copy the java script
  4. Paste the code under the post where post will end
<script>mbtTOC();</script>



After complete these steps just save the Post. All Done ! Now you can see the Table of Contents in Your Blog post.

If you have any problem then first watch the full video. If any other problem you can comment us or contact us in Telegram.