Table of content plugin is a special SEO optimization tool for bloggers and site owners, which will help the visitors to give a quick look at your post or article and it also helps you with a high ranking in Google Search engine for your post or article as Table of Contents highlight your whole post.
As a demo, you can look at the Table of Contents shown in this post.


The process to Install TOC Plugin and Activate it in Blogger Post


This automatic TOC plugin has two processes to add an automatic Table of Contents in your blogger post. The first process is to install TOC plugin into your blogger them HTML and in the second process, you will learn how to activate this plugin on your blogger desired post where you want to show Table of Content in the post.

How to Install TOC Plugin In Blogger Theme

Step1: Edit Blogger Theme HTML

Login to your blogger and go to the Dash-board of your blogger and then click on the Themes. It will open a new page. At the right corner of this page, you will see three dots, click on these dots and then Edit HTML.

Step2: Paste TOC Plugin Code Above </head> Tag

Now in theme HTML press Ctrl + F button of your keyboard and type </head> in the search box to find closing head tag </head> and copy and paste the code given below above the closing head tag </head>.

CODE:-

<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>

Note:
The above code will work for h2 headings, if your post contains h3 headings then replace h2 with h3 where h2 is highlighted in the above code.
In blogger, h2 stands for headings, and h3 stands for subheadings.

Step3: Paste TOC CSS Code Above ]]></b:skin> Tag

Now again type ]]></b:skin> in the search box and copy the code give below and paste it above ]]></b:skin> to add TOC CSS in Blogger theme and click save.

CODE:-

.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;}

Step4: Replace <data:post.body/> tag
Now again press CTRL+F button and find <data:post.body/> tag and replace with the given code below. If you find <data:post.body/> code more then 1 time then replace all with the give code below:

CODE:-

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


 After adding these codes, save your theme. If theme saving shows update fails then reload the page and do all steps carefully and save after every step.


How To Add Table of Contents in a Particular Post

Now go to the post in which you want to add Table of Contents. Edit your post as HTML and Copy the code given below and paste it in the post after first paragraph or where you want to show Table of Contents.

CODE:-

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


CODE:-

<script>mbtTOC();</script>

How To customize Your TOC Plugin

You can customize TOC Plugin according to your wish with the help of CCS code (Step3 of this post). To customize TOC Plugin Look the steps given below.


  1. To change the background color of the TOC edit #ffffe0 at line no. 3.
  2. To change the border color of the TOC box edit #f7f0b8 at line no. 1.
  3. To change the border thickness of TOC box edit 5px at line no. 1.
  4. To change the font color of the TOC headline text edit #707037 at line no. 20.
  5. To change the anchor link color edit #0080ff at line no. 14
  6. To change the font size of anchor link edit 15 px at line no. 20.
  7. To change the font size of the TOC headline text edit 20 px at line no. 23.
  8. To change the size of the TOC box change width edit 70% inline 9.


Features of TOC Plugin

There are many features of TOC plugin Like:

  • SEO Friendly
  • Mobile and Desktop Responsive
  • Do not increase page loading time
  • Fast Loading
  • Toggle button
  • Show in the Location you choose
  • Add unique id in each heading