Add Table of content to blogger

I've divided this into 2 parts. in the 1st part, ill tell you how to edit and past the code in HTML in the themes tab. in pat 2 ill talk about adding the table of contents in the posts section. 


Steps to add a table of contents in the blogger. 


Part.1


1. Go to Blogger Dashboard › Select Blog › Theme › Click on Edit HTML

2. Now search(ctrl+F) for <head> in your template

3. And paste following code above <head> that you just searched for

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

Copy the following code and search it in the HTML tab. 

]]></b:skin>

Once you find it, simply give one line space, and then copy the following code and past it in there. 

.mbtTOC{border:3px solid #f8f8f8;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:nunito, 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:nunito, arial; font-size:25px;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;}

Search(CTRL+F) for this piece of code.  Simply copy the following code and past it in the search console. 

<data:post.body/>

Select the code. 

And then copy the following code and replace the previously selected code with the following one. 

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

Click on save and close the HTML view. 

Go back to the home page. 

Now we're done with part 1. Let's move on to second part. 


Part.2

Now go to the posts section and open a post that you want the table of contents. 

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

    </div>

In the end, you might find this

</p>

copy the following code and past it before the previously found code. 

<script>mbtTOC();</script>

Save the post and refresh the tab. 


Make sure you added the H2 tags for tall the headings. (Make all the headings into "Heading" in the selection tab). 


It's done. I know this is a bit long. But it does worth it rite. 



You customize as you want. 

  • Change background color #F8F8F8
  • Change border color #f7f0b8
  • Change font color #707037
  • Change Anchor link color #0080FF
  • Change the font "nunito"
  • Change the font size of anchor Links 15px
  • Change the font size of TOC heading text 20px