How to add Table of content in Blogger with Problem Solution | Add Table of contents in blog post In two Easy steps

Hello Friend's welcome all of you on Techtricks99. So Today We discuss on a very important & major topic How to add Table of contents in blogger & many of peoples have seen many problems while adding table of contents in their blogger blog & How to create Table of content in Blogger Blog.

So today we also discuss How to Solve table of contents not showing Problem. So friend's I think You all are very excited to know that how you can show table of contents in your blogger blog. 

Add Table of contents In blogger post

Friend's we Know that Every Newbie blogger always search (  How to add automatic Table of contents in Google Blogger , Blogger Table of Contents widget , How to add Table of contents in Blogger, How to create Table of content in Blogger,    and More.. ) to make their blogger blog professtional.

But it's very simple and easy process. Before Knowing how to add it in your blogpost You have to know that what is this and how it works, what's benefit of it so let me Clear this very clearly step by step.

What is table of content?

Table of contents is a type of container in which you can show all of your Main Contents list, page heading navigation list by which your user can find everything very easily which he wants to read & learn.

So I think You don't understand it very clearly so Let us explain this in very easy way...

Let's think You have a book and you want's to Read Chapter 13. If you find chapter 13 by scrolling pages then it's take long time & make you very anger 

But If you use table of contents to find everything in book which is on the starting on your book then you can find your 13 chapter very easily by using page number,

So if you compare this examples with your webpage table of content then you can understand it very clearly.

Let's Compare it.

• Book Is a webpage
• Table of content is a Page Number of your Webpage.

How It work's? & What's the benefit of table of contents?

Table of content's Is a simple Navigation By which user can Read every heading by jumping from 1 heading to 2 heading like moving from 1 station to 2 station😅 (have sum fun) by clicking on table of contents Headings. 

You can also see a demo by clicking on our table of contents heading in our post...

Benefit's of table of contents

• Increase User Engagement 
• Increase You Website Ranking in google
• Increase High chances to get adsense approval on your website
• Decrease Your bounce Rate
• Increase Your user Trust on your website
• Friendly For Seo Optimized Post

Note : We know that you have tried lot of times to add table of content in your blogger blog but still your table of content is not showing in your blog post? So pls.. Read this full article because we also give you all solution of this problem.

How to add table of contents in blogger?

Step #1

• Log in To your blogger account
• Click on theme & edit html
• Press Ctr+F
• Search </head> tag
• Now paste below👇 code before </head> tag.  

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

• Again paste the below👇 code before ]]></b:skin>

.mbtTOC{border:1px solid #f87000;box-shadow:0px 0px 0 #d3d3d3;background-color:#fffdec;color:#000000;line-height:1.3em;margin:30px auto;padding:20px 30px 20px 10px; font-family:oswald, arial;display: block;width: 80%;border-radius:4px;}           
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}           
.mbtTOC ul {list-style:none;}           
.mbtTOC ol li,.mbtTOC ul li {padding:5px 0 0; margin:0 0 0 10px;font-size:16px;line-height:1.3em;}           
.mbtTOC a{color:#000000;text-decoration:none;}           
.mbtTOC a:hover{text-decoration:underline; }       
.mbtTOC button {background:#fffdec; font-family:oswald, arial; font-size:20px;position:relative; outline:none;border:none; color:#000000;padding:0 0 0 15px;}
.mbtTOC button:after{content: "\f022"; font-family: "Font Awesome 5 Free"; font-weight: 900; position:relative;left:60px;font-size:24px;cursor:pointer;}  

• Now Search <data:post.body/> ( Read below code box) 👇👇

1:  Replace : 👇👇  
2:  <data:post.body/> BY below code 👇👇  
3:  <div id="post-toc"><data:post.body/></div>  

Note : Read below code box

1:  Note : If you find more than 1 time <data:post.body/> then replace all with below code 👇👇👇👇  
2:  <div id="post-toc"><data:post.body/></div>

• Save Your theme successfully.
• Now Go to Your post in which you want to show your table of contents & Click on html section.
• Copy below code & paste it before your post's 1st Heading.

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

• Last step copy below code & paste it at the end of your post before your post ending </> tag.

1:  <script>mbtTOC();</script>  

See Below example how you can put the above code.

1:  Example if your post is ending like this👇  

2:  Ending of post</div>  

3:  Now paste the <script>mbtTOC();</script> below like this👇  

4:  Ending of post<script>mbtTOC();</script></div>  

5:  See more examples 👇 
 
6:  Ending of post</script></p><script>mbtTOC();</script></div>  

7:  Above example is indicating that you have to put <script>mbtTOC();</script> this code at the end of post at the last before last ending tag.  

Your all process is done but Now you have to know some precautions in case it's not working properly in your blog post but if you always follow the below  precautions it's definitely work properly in your blog post...

Table of content Not showing All problems solution

Table of content Not showing Reasons & explaination with full details

So friend's we have read a lot of comments on different-different youtube videos & Website. So we find that many of peoples are still facing problems to add blogger table of contents.

So There are a main  problem which is that everyone have added  table of contents code in thier blog but you are not giving proper html tag id's to heading while writing your blogpost by which JavaScript is not able access the html element.

We know that some peoples don't know Html id / tag so please install our provided codes in your blog by following above all steps & also follow below steps to show your table of contents in blogger blog.

Table of content Not showing Problem Fixed

1). Friend's In our provided code we have added <h2></h2> tag in javascript code. so you all, when you write your article please give each heading a particular id (<h2></h2> tag) to those heading which you wanted to show in table of contents give <h2></h2>tag.

Example : If you write any heading then you can write the heading in <h2> html tag which you want to show in table of contents.

<h2>Your heading here which you want to show in table of contents</h2>

You can find <h2></h2> tag in blogger as subheading.

2). Now If you have tried above all method's to show table of contents in your blog post but, It's not working? Now you have only last way to solve this problem which is that you have write your blog post heading in "<h2>show your heading</h2>" tag. But don't write this like as (see below👇)

<h2>

Your text</h2>

Write the above☝ code in manner way like this 👇.

<h2>your text which you want to show in your table of contents</h2>

All the above (1,2)process is done In html section of post editor.

Table Of content All Problem fixed?

So friend's I think you all like this post and also you have successfully added table of contents in your blogger blog please have a comment if you have any problem related to This article & more. 

We definetly give a reply of every comment & If I am sucess to help all of  by this article then pleass share it with your friend's & your loved one's... Have a good day!

Thanks for coming here...Keep Coming..