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 |
What is table of content?
- 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?
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
How to add table of contents in blogger?
- 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>
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>
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.
![]() |
Table of content Not showing All problems solution |
Table of content Not showing Reasons & explaination with full details
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 text</h2>
<h2>your text which you want to show in your table of contents</h2>
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!
Nice post, I am also finding such like post. Thank you finally my table of contents is added. Really thank u so much..
ReplyDeletePost a Comment
Please Don't spam in Comment Box