Blogger Table Of Content (TOC) Automatically Add in Every Blog Post
Today, I will show you, Blogger Table Of Content (TOC) Automatically Add In Every Blog Posts.Table Of Content (Toc) not available every theme or template.So it has to be added manually.
WordPress website Table of content added by various plugins but blogger table of content (toc) is difficult. So, i will sho you how to add blogger table of content in every posts,manually.
Table of Contents Benefit SEO
Adding Blogger table of contents (TOC) to an every blog post will improve SEO in many ways,like; The table of content (TOC) improves the usability of the post, once it's easier for the reader to see the data you cover in your post and supply a way for the reader to jump to sections of interest, the reader can spend more time on your page.
Add Blogger Table of Content (toc) Manually
First of all,
- Go to Blogger Dashboard > Theme > Edite Theme
Search for <head> on your blogger template and past this code blew <head> Section.
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>(code-box)
Then, Search ]]></b:skin> code and just above it paste the code.
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} */ (code-box)
Now, Search for <data:post.body/> and replace this code with the code below
Code:
<div id="post-toc"><data:post.body/></div> (code-box)
Note: <data:post.body/> search and you need to every this tag replace with following code.
Template is ok.
Secondly,
- Go to Blogger.com and go to blogger Dashboard.
- Create New Post
- Write your content with h1 h2 h3 etc.
- Then switch HTML View
Then, past the following code blew in your post html after thumbnail link.
Like:
Code :
<div class="mbtTOC2"> <button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button> <div id="mbtTOC2"></div> </div> (code-box)
- Then, you need to past following code with post end tag.
Code:
<script>mbtTOC2();</script> (code-box)
All done. Now publish your post.
Tags :
add table of contents in blogger
how to add automatic table of contents in google blogger
blogger table of contents widget
how to add table in blogger post
dynamic table of contents html
javascript table of contents
table of content for blogs
table of contents in wordpress
