If you Running a blog then you definitely write a post in it which means you also need a Table of Content for your Post. So today we are going to know How To Add an Automatic Table of Content in a Blog Post.

                                                                                            And also I'll give you the HTML code below in post for help. So you can add these codes step by step in your blogger. then you're able to use Table of Content.

                                 

How To Add Automatic Table of Content in Blog Post

so before this, we have to know about some points for the Table of Content.

    what is a table of content?

    a table of content gives you the basic idea of the whole post what this writer going to talk about and you also can go directly on any of the paragraphs which is high lighted in the table of content. a table of content usually includes the title and description of the first header.

    what is the purpose of the table of content?


    the table of content helps in two purposes- it gives the visitor an overview of the content and organization of the document. it also allows readers to go directly to a specific section in the post.

    Is a table of content necessary(TOC)?

    no, it's not necessary at all but if you really want to save time for your reader and want to give a nice look to your post then you should add a table of content in your every post.

    Now you're ready to add TOC in your blogger but before this, I request you one thing.

    Do read step by step and follow this right now so that you can check whether its working or not.

    So let's start

    Now open your blog theme with Edit HTML

                        How To Add Automatic Table of Content in Blog Post in 2020


    then search the </head> 


                    How To Add Automatic Table of Content in Blog Post in 2020

    Table Of content

    Copy Below full link and paste this link into above of </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>


    How To Add Automatic Table of Content in Blog Post in 2020


    the second step is search the code - ]]></b:skin>

    ]]></b:skin>


    How To Add Automatic Table of Content in Blog Post in 2020


    then paste the code above of this 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;}

     

    How To Add Automatic Table of Content in Blog Post in 2020


    then search this code - <data:post.body/>

    How To Add Automatic Table of Content in Blog Post in 2020


    Replace this code with the below code if you find more then one code replace all in
    In my case, I have done it three-time.

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


    How To Add Automatic Table of Content in Blog Post in 2020

    Then save the HTML section.


    Then go in the post where you want to show the TOC.

    How To Add Automatic Table of Content in Blog Post in 2020


    Paste this below code above on your first heading.


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


    How To Add Automatic Table of Content in Blog Post in 2020


    Copy the last code and paste it at the second last line of the page


    <script>mbtTOC();</script>


    How To Add Automatic Table of Content in Blog Post in 2020

    Then save the post 

                          How To Add Automatic Table of Content in Blog Post in 2020

    and refresh your post page.


    How To Add Automatic Table of Content in Blog Post in 2020



    Now you're able to see the Table of Content in your post. Do remember one thing you need to some H2 Tag means some Header in your Post then the TOC will automatically catch all the Header in the Post.

    One more thing you have to Do it for all post every time just go in the post and add two last codes it that then your TOC will work and looks good.

    you can read another post for blogging related problems and also let me know how your TOC is working or if any problem you are facing then ask me I'll definitely help you


    Thanks for reading...