How To Add Table Of Contents In blogger

If you are bloggers than you need to make attractive article and here we are learned how to add a table of contents in a blogger

If you are bloggers than you need to make an attractive article and here we are learned how to add a table of contents in a blogger.

Table of contents is one of the basics required for articles. Table of contents means shows your headings in the table and readers read your article directly.

I guide step by step on how to add a table of contents in bloggers. if you are beginners in blogging then your article is looking so bored so the table of content makes your article easy and attractive.

table of content




    Step 1

    <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';}}           
    //]]> 

    Step 2

    Step 1: Search this code: ]]></b:skin>

    Step 2: Copy the below code

    ]]></b:skin>


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

    Step 3

    Step 1: Search this code: 

    <data:post.body/> 
     Step 2: Replace this code with below code

    <div id="post-toc"><data:post.body/></div>
    Note: Save your theme

    Step 4

    Step 1: Now go to compose article and html view

    Step 2: Copy below code

    Step 3: Search your headings and paste code above the </br>


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

    Step 5

    Step 1: Copy the code

    Step 2: Go html view and and go last in html code 

    tep 3: See </div> and paste above

    <script>mbtTOC();</script>