Easy Table of Contents

 Easy Table of Contents:-

In Blogger, There is no Plugins. If We Want to Make a Table of Content, We have to follow These Things. Here I Discuss How to Make a Table of Content in Blogger.

HTML Table of Contents Design:-

• Login on Blogger.com
• Goto Theme Section and Click on Three Dots 
• Click On Edit HTML then click on the Code 
• Search (Press CTRL+F) and type </head>
• After getting this, copy below code and paste it before </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>

• After Pasting the Code, Search for it ]]></b:skin> Then 
• Paste the Below Code Before it

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

• After Pasting the Code, Search for it <data:post.body/> 

Note: If You Will Find More Than One <data:post.body/>Then Replace All by this Code Below.

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

• Save the Theme and Goto Pages or Posts (If You Want Content Menu in Pages then Goto Pages or If You Want Content Menu in Posts then Goto Posts)
• Open a Post or Page 
• Then Goto HTML View, Paste the Below Code before H1,H2,H3 Heading

<br /> 

<div class="mbtTOC"> 

    <button onclick="mbtToggle()">Table Of Contents</button> 

    <ul id="mbtTOC"></ul> 

    </div>

<br /> 

• After Pasting the Code,Copy & Paste the Below Code Before End of the Page or Post

<script>mbtTOC();</script>

• Update the Post or Page and View the Post or Page
• Done.

This post is related to-

easy table of contents

html table of contents design

how to design table in html

easy table of contents shortcode