[Blogger Toc]How to add table of content in blogger Post 2021 [100% Working]

Add Table Of Content (toc) in Blogger post 2021

177

I will show you; How to Add Table of content in blogger post 2021 and get more benifit from google search.You can Easily add blogger table of content (toc) any post.

Adding WordPress Table Of Content, its very using a table of content plugin but you can add blogger table of content in every post,its difficult.

Today, i will guide you, How to Add Table of content in blogger post 2021 step by step.How to add table of content in blogger Post

 

Good to know :

What is table of content (toc)

A table of contents , usually headed simply Contents and abbreviated informally as TOC, is a list, usually found on a page before the start of a written work, of its chapter or section titles or brief descriptions with their commencing page numbers.

 

A table of contents (toc) is a list of jump links that lead to the heading or main title of a page or post. They are especially effective for long posts because they highlight titles to enhance the visitor experience.

A reader can go to the most relevant part to read the post. Or they can read the whole article – go to any part of the post with one click.

 

Blogger Table Of Contents Benefit In SEO

 

A table of contents helps people search on engine bots with raw on google. By Raw the names of important sections of an article clearly, bots can understand what is the articles main keywords.

How To Add table of content in blogger Post

Adding table of content in Blogger will allow the readers to jump to the important parts of a blogger post . It will be easy for a reader to understand your article.add table of content in blogger Post

So, lets start todays topic.
First, Go to blogger.com

  • Click Theme
  • Click Edite Theme
  • Now, find your template <head> Section and past the code blew.

Blogger table of content add

Code :

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

 

Secondly,
Search ]]></b:skin> code and just above it paste the following CSS code

Toc table of content blogger

 

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} */

 

 

Search for <data:post.body/> and replace it with the code below.
Note: <data:post.body/> It needs to be replaced every time you find it in your template

 

Blogger post table of content toc

Code :

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

 

All done, Template edite.

Now, Create a new post and when you fully write your post then switch this post into HTML View.

Table of content add blogger

 

Now, Paste the following code after thumbnail or before the heading tag of your post.

Table of content add wordpress

 

Then, Past the following code after post end tag.

 

code :

<div class="mbtTOC2">
<button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>

Wp table of content add

Code:

<script>mbtTOC2();</script>

 

Now, you can add table of content in blogger Post.

Blogger Tips And Tricks :

Leave A Reply

Your email address will not be published.