Add Automatic Table of Contents in Blogger or Wordpress Posts.
Add Automatic Table of Contents in Blogger or Wordpress Posts: For more videos, remember to Like, Share, Comment, and Subscribe to our “Pro Jaankari” Youtube Channel.
Table of Contents Code:
Make sure to take the Backup the Blogger or Wordpress Template.
Log In to your Blogger Account.
Go To Theme.
1. Go To Edit HTML.
2. Add Code in <Head> Section.
3. Add Code in ]]></b:skin> Section.
4. Replace Code in Body.
5. Add Code in Post & Article.
6. Last Code End of the Posts.
Friends, now let's talk about all the steps one by one.
Step 1: Copy and Paste above 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>
Step 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}
*/
Step 3:
Search for <data:post.body/> and replace it with the code below.
<div id="post-toc"><data:post.body/></div>
Step 4:
Go to your blogger or wordpress post. Then switch to "HTML" mode and then paste the following HTML code just before the first heading.
<div class="mbtTOC2">
<button>Table of Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>
Step 5:
Paste this code in the Html view of your blogger post in the last.
<script>mbtTOC2();</script>
Frequently Asked Questions (FAQ)
What is Table of Contents?
When you visit the Internet, you must have got a table and in it you will get to know about all the headings that are in that post. And you can choose from this what you want to read in that post and accordingly if you click on the heading, then you will go straight to the same paragraph, and this is known as Table of Contents.
How do you insert a Table of Contents?
Select References from the toolbar ribbon. Select Insert Table of Contents toward the left end. (Alternatively, choose Insert Table of Contents > Table of Contents. The table of contents is added, displaying the document's headings and page numbers.
How to add Table of Contents in Blogger or Wordpress Website automatically?
Select an Automatic Table of Contents style from the list by clicking References > Table of Contents. Note: If you choose a Manual Table of Contents style, Word won't automatically update the table of contents or build one using your headers. You can read about how to add table of contents automatically from our blog by Incredible Tools Online.
How to edit Table of Contents in Word?
Image for Editing the Table of Contents in Word.
Select the Ribbon's References tab. Select the Table of Contents option under the section heading. Choose the Custom Table of Contents option toward the bottom of the dialogue box or pop-down window.
