A table of contents is a great way to make your blog posts more organized and easier to navigate.
It allows readers to easily find the topics they want to read about and jump to that section of the post.
It also helps search engines index your content and make it more visible in search results.
Adding a table of contents to your blog posts is a great way to make them more organized and easier to read.
It allows readers to quickly find the topics they want to read about and jump to that section of the post.
Additionally, it helps search engines index your content and make it more visible in search results.
This can result in more traffic to your blog and higher rankings in search results.
Adding a table of contents to your blog posts can be a great way to make your content more organized and easier to navigate.
It also helps readers quickly find the information they are looking for without having to scroll through the entire post.
Additionally, adding a table of contents to your posts can improve your SEO performance as search engine crawlers are able to better understand the structure of your content.
This could potentially result in higher rankings in search engine results pages.
Adding a table of contents to your blog posts is an easy way to make your content more organized and easier to navigate.
With the help of Technical Sagar, you can easily add a table of contents to your blogger posts in a few simple steps.
1) Copy and Paste above </head> tag in your HTML Code of Blogger👇🏾
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V2.0
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>
2) Search ]]></b:skin> code and just above it paste the following CSS code:👇🏾
/*####TOC Plugin V2.0*/
.mbtTOC2{
border:5px solid #0008FC ;
border-radius: 10px 50px 10px 50px;
box-shadow:5px 5px 5px 5px grey;
border-style:dashed;
background-color:#ACDEFB;
color:#707037;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
font-family:Oswald, arial;
display: block;width: 70%;
}
.mbtTOC2 button{
background:#ACDEFB;
font-family:oswald, arial; font-size:22px;
position:relative;
outline:none;
border:none;
color:#2E2E2E;
padding:0 0 0 15px;
}
.mbtTOC2 button a {
color:#FF0313;
padding:0px 2px;
cursor:pointer;
}
.mbtTOC2 button a:hover{
text-decoration:underline;
}
.mbtTOC2 button span {
font-size:15px; margin:0px 10px;
}
.mbtTOC2 li{margin:10px 0; }
.mbtTOC2 li a {
color:#EA1414;
text-decoration:none;
font-size:18px;
text-transform:capitalize;
}
.mbtTOC2 li a:hover {
text-decoration: underline;
}
.mbtTOC2 li li {margin:14px 0px;}
.mbtTOC2 li li a{
color:#040404;
font-size:15px;
}
.mbtTOC2 ol{counter-reset:section1;list-style:none}
.mbtTOC2 ol ol{counter-reset:section2}
.mbtTOC2 ol ol ol{counter-reset:section3}
.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}
/*
.point2 {list-style-type:lower-alpha}
.point3 {list-style-type:lower-roman}
.point4 {list-style-type:disc}
*/
3) Search for <data:post.body/> and replace it with the code below:👇🏾
<div id="post-toc"><data:post.body/></div>
4) Goto your blogger post. Then switch to "HTML" mode and then paste the following HTML code just before the first heading.👇🏾
<div class="mbtTOC2">
<button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>
5) Paste this code in the Html view of your blogger post in the last.👇🏾
<script>mbtTOC2();</script>
Conclusion
We hope this article has shown you how to add an automatic table of contents in a Blogger post.
By adding a table of contents, you can help your readers quickly navigate to the most important sections of your post.
It can also help to improve the SEO ranking of your post by providing search engines with internal links they can crawl.
Do you have any questions about adding an automatic table of contents to your Blogger post? Let us know in the comments section below!