How to add table of contents in blogger? [Multilevel] 2021
A table of contents is a list of links that allows the reader to jump to a certain section of a page without having to scroll through all of the content. A table of contents can be useful for a large article with a lot of different topics.
Adding a table of contents to your articles on blogger is a great way to help your visitors find what they are looking for more easily. In this post, we will teach you how to add a table of contents to your website, so you can provide a better experience for your visitors.
What is a table of contents?
While reading an article, we tend to be curious about the content and want to know what’s there in the article. This is where contents table comes in handy. It gives a quick look at the whole article. A TOC or Table of Contents is a list of all the sections present in an article.
It makes it easier for the readers to have an idea about the content before they start reading it. A TOC helps readers to decide whether to read the article or not. Just like how an elevator pitch helps you decide whether to invest in a business or not.
What are the benefits of the table of contents?
If your blog post is more than 1000 words long, you should definitely have a TOC. It is estimated that the average reader skips about 20% of the words that he or she reads. When someone reads a long article with no TOC, that person will end up missing a good deal of the paper’s content, because he or she will be too busy searching for information on the page.
A good table of contents will make it easy for someone to jump to the section
of the paper that he or she is most interested in.
The benefit is that it
helps your readers quickly locate the information they need.
You May Like: 10 Ways to Increase Blogger Website Speed
How to add a TOC in blogger?
Steps to add
- Copy and Paste below code 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 by fluxwiz.in
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>2. Next search ]]> and just above it paste the following CSS code:
/*####TOC Plugin V2.0 by Fluxwiz/
.mbtTOC2{
border:3px solid #ff751a ;
border-radius: 10px 10px 10px 10px;
box-shadow:5px 5px 5px 5px grey;
border-style:solid;
background-color:#f9f9f9;
color:#707037;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
font-family:Oswald, arial;
display: block;width: 55%;
}
.mbtTOC2 button{
background: none;
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:4px 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}
*/3. It is best to display TOC right after your starting paragraph or show it before the first heading on your blog post.
To do this, switch to the "HTML" mode of blogger editor and then paste the following HTML code just before the first heading.
<div class="mbtTOC2">
<button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>4. Paste this code in the Html view of your post in the last.
<script>mbtTOC2();</script>Automatic TOC
If you don't want to add code to your post every time then you can do it. For doing it have to add a post template to your blogger blog.
|
| Blogger Editor |
Go to
Settings>Post template (Optional)>Click on it
Paste the following code and "Save" it
<p> Top heading </p><p><br/></p>
<div class="mbtTOC2">
<button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button>
<div id="mbtTOC2"></div>
</div>
<p>Paragraph starts here</p>
<script>mbtTOC2();</script>
You May Like: Paid blogger templates free download 2021
Conclusion
This article has provided you with some useful tips about how to add table of contents in blogger with Preview Theme. We hope this article has helped you. If you have any other questions about how to add table of contents in blogger, please feel free to ask us anytime. Thank you for reading. We hope to provide you with more useful articles in the future.
2 comments