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

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.

                                 

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

what is a table of content?

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

                   

then search the </head> 

                

Table Of content

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

]]></b:skin>

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

 

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

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

Then save the HTML section.

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

Paste this below code above on your first heading.

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

    </div>

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

<script>mbtTOC();</script>

Then save the post 

                      

and refresh your post page.

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…