What is Table Of Content(TOC)
The table of content should list all front matter, main content and back matter including heading and page number of all chapters. A good table of content should be easy to read accurately formated and completed
In WordPress making of table of content is easy with plugins but google blogger does not provide plugins we just need to make some java script and CCS, Which doesn't lower the speed of your website
There are many synonym for table of content like Agenda, Chart, list, Compedium, index, graph, statistics
Providing a table of contents helps improves the experience that people reading your article have..
IF U DONT WANT TO READ THEN DIRECTLY GO TO INSTALLATION PROCESS:
CLICK HERE
I am going to show an advance process to create Automatic Multilevel table of Contents in Blogger Post by just pasting some line of codes and not only that but i will also Explain each and every code so you can customize yourblog table of contents as per your choice and also you can select the colour and manage the size for ding of website
SEO Benifits OF Table Of content (TOC)
Google always loves well detailed and well-structured blog posts and pages. And by adding a table of content in Blogger posts, you make your blog post well structured and user-friendly. add a table of content in blogger to get Experience and better result.
And if you add a TOC in your blog post, it will be structured and reader-friendly. Google may display jump to links in the Search Result Page, it’s very beneficial for webmasters and it can increase your CTR(click through rate)
Improve User Experience
According to research by NN Group, more than 79% of total web readers are scanners who only read the important points of a webpage. We also love to read well-detailed articles.User experience is a very important thing to get higher ranking in SERP (Search Result Page). User experience is a very important part of a blog to rank faster. And a table of content will help you to improve the user experience of your blog.
Does Every Post Need a Table of Contents?
When deciding on creating a table, realize that not every piece of content may need one. Then again, this is really user preference. You can choose to share what you like. And your audience may like the quick jumps to specific content.However, I usually err on the side of keeping things as easy as possible for visitors.As a rule of thumb, I won’t include a content table if it’s less than 1000 words or has less then 5 headings. Otherwise, I feel it’s a bit of a waste of space on the page and really unnecessary.But as I said, this is completely up to you and what you’re site’s audience wants every blog is different
Makes it Easier to Find Specific Information
Statistically speaking, about 55% of visitors will only read your post for 15 seconds. And many of these people leave because they either can’t find what they’re looking for or they don’t think the post provides enough detail.When you add a table of contents, you can help reduce this number by letting people see and click exact information. Just make sure your headings are detailed regarding the sections of content.At any rate, it makes it easier for people to understand what the article contains.
Potential to Improve On-Page Time
Speaking of 15 seconds, one of the most important metrics of Google Analytics is on-page time. This tells you if the average person is fulling reading the content or if you need to revamp the piece.If the visitor can see that one of your sections does, indeed, contain what he or she is looking for, it may improve how long the visitor stays on your site. And this contributes to appearing higher in Google search results.I say “potential” because the visitor may see that the content doesn’t contain the information he or she wants. At that rate, you’ll need to re-examine your article if the page experiences a very short “Time On Page” in Analytics
There is no table of content generator in blogger we need to type it manually or by coding in HTML
As we know blogger not provide plugins like WordPress so there is no chance to generate the TOC
people also search
Add Script In Template & Blog
I will guide you step by step to add a table of contents in Blogger. I have explained this process to 6 simple steps.
Step 1:- First login to your Blogger Blog in which you want to add a table of contents . Click on Theme and then click on edit HTML. (as shown in screenshot).
Step 2:- Find </head> in the HTML file and paste the below-given code just above the </head> tag shown in screenshot
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 by MyBloggerTricks.com
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> 
/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.mbtTOC2{
border:5px solid #242424 ;
border-radius: 10px 50px 10px 50px;
box-shadow:5px 5px 5px 5px grey;
border-style:none;
background-color: #FFFFFF;
color:#707037;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
font-family:"Open Sans", sans-serif;
display: block;width: 70%;
}
.mbtTOC2 button{
background:#FFFFFF;
font-family:"Open Sans", sans-serif; 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:#000000;
text-decoration:none;
font-size:18px;
text-transform:capitalize;
}
.mbtTOC2 li a:hover {
text-decoration: underline;
}
.mbtTOC2 li li {margin:4px 0px;}
.mbtTOC2 li li a{
color:#000000;
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}
*/
<div id="post-toc"><data:post.body/></div>
<div class="mbtTOC2">
<button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>
<script>mbtTOC2();</script>
0 Comments