Add Automatic Table Of Contents In Blogger (No Manually) - TechyWebTech
Are you want to advertise, Link Insertion,Guest post or promotion Reach out Now..

Search Suggest

Add Automatic Table Of Contents In Blogger (No Manually)

Know How To Add Automatic Table Of Content In Blogger Post's 100% Without Manually Add Code In Each Blog Post's. Show All Heading,Subheading As Table.

Insurance,Loans,Mortgage,Attorney,Credit,Lawyer,Donate,Degree,Hosting,Claim,Conference Call,Trading,Software

Recovery,Transfer,Gas/Electicity,Classes,Rehab,Treatment,Cord Blood,crypto,finance,google,business,tech,DNS

Hello Friends,

Welcome to Techy Web Tech blog's another article.

If you are looking for Add Automatic Table Of Contents In Blogger (No Manually) you are not alone.

At the end of the post your all queries will solve about Add Automatic Table Of Contents In Blogger (No Manually).

What if you not satisfy ?

Don't worry we are here for you..

Table of Contents [Hide]
    Curious To Know How To Add Automatic Table Of Content In Blogger Post's Without Manually Add Code In Each Blog Post's.

    Add Automatic "Table Of Content" In Blogger Post's (No Manually)


    Many Blog Help You To Add Table Of Content In Blogger But For Doing It You Have To Add TOC Code Manually In Every Blogger Post's.

    That Is Very Boring And Not Every Person Blogging On Blogger Can Do This In Long Time.

    That's Why Google Blogspot Blogger's Search Automatic Table Of Content Plugin For Blogger But , We All Know That Blogger Not Support Plugin's We Have To Integrate Codes Manually On Blogger.


    What is Automatic Table Of Content 

    This makes good table of contents for our readers to automatically navigate all the various headings and subheadings from their blog posts without manually defining the TOC.



    Does Blogger Support Automatic Table Of Content 

    Blogger Does not support Automatic Table Of Content. blogger has some Limitations when you use it use will feel. But , Now I Am Doing Full Time Blogging In Blogger ( Blogspot ) And Find A Way To Add Table Of Content Automatically In Blogger Post's.  

    Features Of This Blogger Automatic TOC

    • Look Professionl.
    • Increase UI.
    • Show All h1, h2, h3, h4 In Table Of Content.
    • No Need To Add Manually Integration Of Code In Post.


    How To Create Automatic Table Of Content In Blogger Post

    1. Login To Blogger & Select You Blog You Want To Add TOC.
    2. Click To Theme Section And Choose Edit HTML.

    Automatic "Table Of Content" In Blogger


    3. Search For </head> Tag And Paste Below Code Before This.

    How To Create Automatic Table Of Content In Blogger Post



    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

    <script type='text/javascript'>

    //<![CDATA[

    function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}

    //]]>

    </script>





    4. Again , Search For  ]]></b:skin> Or ]]></b:template-skin>  And Paste Below Code Before This.

    How To Create Automatic Table Of Content In Blogger Post



    .mbtTOC2{border:1px solid ##f7f0b8;background-color:#ffffe0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 10px 20px 10px;font-family:Oswald,arial;display:block;width:80%}.mbtTOC2 button{background:#ffffe0;font-family:oswald,arial;font-size:22px;position:relative;outline:0;border:0;color:#707037;padding:0 0 0 15px}.mbtTOC2 button a{color:#0080ff;padding:0 2px;cursor:pointer}.mbtTOC2 button a:hover{text-decoration:underline}.mbtTOC2 button span{font-size:15px;margin:0 10px}.mbtTOC2 li{margin:10px 0}.mbtTOC2 li a{color:#0080ff;text-decoration:none;font-size:18px}.mbtTOC2 li a:hover{text-decoration:underline}.mbtTOC2 li li{margin:4px 0}.mbtTOC2 li li a{color:#289728;font-size:15px}.mbtTOC2 ol{counter-reset:section1;list-style:none}.mbtTOC2 ol ol{counter-reset:section2}.mbtTOC2 ol ol ol{counter-reset:section3;margin:10px 0}.mbtTOC2 ol ol ol ol{counter-reset:section4}.mbtTOC2 ol ol ol ol ol{counter-reset:section5}.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}



    5. In Last , Search For <data:post.body/> And Replace With Below Code.

    How To Create Automatic Table Of Content In Blogger Post



    <div id="post-toc"> <div class="mbtTOC2"> <button>Table of Contents <span>[<a id="Tog" onclick="mbtToggle2()">hide</a>]</span></button> <div id="mbtTOC2"></div> </div><data:post.body/><script>mbtTOC2();</script></div>


    6. Save Blog Theme.

    [If Your Theme Has More Than One <data:post.body/> Replace All With Given Code Othervise Table Of Contents Not Work Properly. ]



    Limitations Of Blogger Automatic Table Of Content

    This Automatic Table Of Content Show After Title In Blogger Post In All Blog Post's.

    should Use Manual TOC ?

    The Benefit Of Blogger Manual Table Of Content Is That We Can Add Anywhere On Post That Is Suitable For Blogger Post. It Looks Professional Normal , Clean And Gives Better UI.


    Bottom Line
    Yep , if This Post Help You To Create Automatic Table Of Content In Blog Then Share This Article On Social Media To Motivate Me..
    Impress with Us?

    Feel free to know more About us, contact us, or work with us.

    You can find this article on bing or bing news.

    What was the your openion, suggestion related this blog post ?

    We will love to hear it in the comments.

    Insurance,Loans,Mortgage,Attorney,Credit,Lawyer,Donate,Degree,Hosting,Claim,Conference Call,Trading,Software

    Recovery,Transfer,Gas/Electicity,Classes,Rehab,Treatment,Cord Blood,crypto,finance,google,business,tech,DNS

    Post a Comment

    We Use Auto Comment Approval but in conditions. Because This Blog on Blogger Platform so CommentLuv Not Available..
    1. Don't Comment for just spamming.
    2. Use maximum 1-2 links in one comment.
    3. If you want more comment Backlinks do comment on different post's..