How To Add Table Of Contents in Blogger Blog Posts (2 Easy Steps)

Insurance,Loans,Mortgage,Attorney,Credit,Lawyer,Donate,Degree,Hosting,Claim,Conference Call,Trading,Software

Recovery,Transfer,Gas/Electicity,Classes,Rehab,Treatment,Cord Blood,crypto,finance,google,business,tech,DNS

Hello Friends,

Welcome to Techy Web Tech blog's another article.

If you are looking for How To Add Table Of Contents in Blogger Blog Posts (2 Easy Steps) you are not alone.

At the end of the post your all queries will solve about How To Add Table Of Contents in Blogger Blog Posts (2 Easy Steps).

What if you not satisfy ?

Don't worry we are here for you..

Table of Contents [Hide]

After Reading This Post You Can Create Table Of Content For Your Blogger Blog That will Show You Heading,Subheading,And Minor Heading.

This Post will really helpful if you want to table of content on your google blogger's blog posts. 

What is the table of content 

TOC (table of content) in a blog post is usually seen before or after the first paragraph of a blog post. The TOC shows the basic heading or sub-heading of your post or article and gives information about your entire post.

Does Table Of Content Increase Ranking/Traffic

when we use table of content in our posts so search engines can easily navigate and understand all important parts of posts like Headings , Subheadings , major Headings.

And after using it it's chance will increase that our blog posts will appear on google SERP Ranking.

Benefits of using Table of Content

Table of contents appear when your post begins or only after the first paragraph. Your readers can go to the top heading, subheading or minor heading of your post.

• It makes a good impression and gives more design to your blog post.
• Manages your readers' needs
• Provides a roadmap for its readers to navigate easily.
• Increase User Interface.
• Increase Your CTR.

Does Table of Content improve SEO?

Yes, the table of contents can also help to Optimize Blog Or Sites SEO. It's increase your UI. 

It's not effect much you can use or not it's Your Choice.

How to Create Table of  Contents in Blogger

Follow Given Below Steps And Create table of Content in blogger blog that show you heading , subheading , minor heading in TOC table on your posts.

1. Log in to your blogger blog and select the Theme and click on EDIT HTML.

2. Find the </head> tag and paste the code below before the </head> tag.

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>

//<![CDATA[

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>

3. Now, Copy The the CSS code given below and paste before  ]]> </ b: skin>

.mbtTOC2{border:1px solid ##f7f0b8;background-color:#ffffe0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 10px 20px 10px;font-family:Oswald,arial;display:block;width:80%}.mbtTOC2 button{background:#ffffe0;font-family:oswald,arial;font-size:22px;position:relative;outline:0;border:0;color:#707037;padding:0 0 0 15px}.mbtTOC2 button a{color:#0080ff;padding:0 2px;cursor:pointer}.mbtTOC2 button a:hover{text-decoration:underline}.mbtTOC2 button span{font-size:15px;margin:0 10px}.mbtTOC2 li{margin:10px 0}.mbtTOC2 li a{color:#0080ff;text-decoration:none;font-size:18px}.mbtTOC2 li a:hover{text-decoration:underline}.mbtTOC2 li li{margin:4px 0}.mbtTOC2 li li a{color:#289728;font-size:15px}.mbtTOC2 ol{counter-reset:section1;list-style:none}.mbtTOC2 ol ol{counter-reset:section2}.mbtTOC2 ol ol ol{counter-reset:section3;margin:10px 0}.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}

4. Remove the <data.:post.body /> tag from Theme and replace it with the code below( If your blog theme has more than one <data:post.body /> tag then change all otherwise it will not work ).

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

5. click Save.

How to show Table of content in blogger posts

After You Follow All Steps that given above that's right but after it also table of content will not show in your blogger posts.

For Showing Table Of Content( TOC ) On Blogger Posts You have To Add Some code in posts.

Again Follow Below Steps -

1. Go to the HTML section of your post and paste this code where you want to show table of content on your post.

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

2. Paste  this code in the last Of Your Post HTML section and Update Post.

<script>mbtTOC2();</script>

Now, You Can See How Is Table Of Content Looking On Your Blogs Post. You Can See All Heading , Subheading , Minor Heading are showing properly On Table of Content Container.

Limitations Of  This Table Of Content Code

This Code Not Add Automatically Numbers (1,2,3) before Major Heading(h1) In Blogger Post's.

Conclusion :

I have explained in this post How To Create Table Of Content On Google Blogger Blog with pictures.

I hope You will Really Like this post and able to create table of content easily. 

Please Share This Post With Your Relatives,Friends And Other bloggers who blog on google blogger and help each.

If You Have Any Doubt or suggestions please comment below comment Box.

❤ Keep In Touch techy web tech ❤

Impress with Us?

Feel free to know more About us, contact us, or work with us.

You can find this article on bing or bing news.

What was the your openion, suggestion related this blog post ?

We will love to hear it in the comments.

Insurance,Loans,Mortgage,Attorney,Credit,Lawyer,Donate,Degree,Hosting,Claim,Conference Call,Trading,Software

Recovery,Transfer,Gas/Electicity,Classes,Rehab,Treatment,Cord Blood,crypto,finance,google,business,tech,DNS