How to Add Automatic Table of
Contents TOC in Blogger Post 

How to Add
Automatic Table of Contents in Blogger Post. Please do
not forget to Share and Comment. 


Table of Contents

First of all add the below code before the
closing tag</HEAD> tag in your
blogger Theme HTML. For this you should press CTRL+F type in the blogger theme,
then add the below code.

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

 

2nd Code:


Then you should find the below code in the blogger theme HTML Section and
again press CTRL+F and find the below code. After finding the code in the
blogger HTML area copy the below code and press Enter. Then Copy the third code
and add before the code (]]></b:skin>).

]]></b:skin>

3rd 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;}

 

4th Code:


 Note: If you will find more than one <data:post.body/> so replace
all by this code below.

<data:post.body/>

 
Note: If you will find more than one <data:post.body/> so replace all by
this code below.
<div id="post-toc"><data:post.body/></div>
replace with this Code.

 

5th Code:

When you will done the process then
in every blogger post you should add the below code in every blogger post HTML
area.

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

</div>

6th Code:

Add these two codes the upper one and
below one code in every blogger post HTML area.

Add the upper code before <H2> tag and
the second one in the Last of the Post.


<script>mbtTOC();</script>