How to add a Table of Content in Blogger
Blogger
So I this post I will show step by step method to make TOC for your blog post and pages.
But before we get started, Let’s discuss some benefits for having a TOC in your blog post.
SEO Benefits of TOC
As you know Google loves the very detailed and well-structured blog posts and web pages. And by adding toc in your blog post you can make your blog post more structured.And If your blog post will be well structured then google can display Jump to links in the meta description in Search Result Page.
Which is a huge SEO benefit!
Now, Here is an example of Google Jump to links.
 |
| Google Jump Link |
Improved User Experience
User experience is another very important part of a blog which lots of Blogger don’t take seriously. But here is the game,according to a study user experience is the key to get higher ranking in SERP.
And a Table of Content will going to help you, improve the user experience of your website.
According to a research by NN Group, more than 79% of total web readers are scanners who only read the important points of a webpage.
And adding a TOC will allow your readers to jump to the important part of a blog post. Which can be a breakthrough for user experience of your website.
Now, lets first discuss how you can automatically add a table of contents in google blogger posts.
Here is How to Automatically Create Table of Contents in Blogger
I am going to divide the workflow of making a TOC into 5 easy steps so it will become super easy for you to implement.Step 1: Now, the first thing you need to do is log in to your Blogger dashboard and then go to the Theme editor.
And click on the Edit Html button.
Blogger Dashboard >> Theme >> Edit Html
Here, you have to paste the codes given below
Just above the close heading tag </head>.
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC plugin by MyBloggerTricks.com
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>To do that you need to paste these CSS codes
Find the ]]></b:skin> in your screen and paste the CSS codes just above the ]]></b:skin>.
.mbtTOC{
border:5px solid #f7f0b8;
box-shadow:1px 1px 0 #EDE396;
background-color:#FFFFE0;
color:#707037;
line-height:1.4em;
margin:30px auto;
padding:20px 30px 20px 10px;
font-family:oswald, arial;
display: block;
width: 70%;
}
.mbtTOC ol,.mbtTOC ul {
margin:0;
padding:0;
}
.mbtTOC ul {
list-style:none;
}
.mbtTOC ol li,.mbtTOC ul li {
padding:15px 0 0;
margin:0 0 0 30px;
font-size:15px;
}
.mbtTOC a{
color:#0080ff;
text-decoration:none;
}
.mbtTOC a:hover{
text-decoration:underline;
}
.mbtTOC button{
background:#FFFFE0;
font-family:oswald, arial;
font-size:20px;position:relative;
outline:none;
cursor:pointer;
border:none;
color:#707037;
padding:0 0 0 15px;
}
.mbtTOC button:after{
content: "\f0dc";
font-family:FontAwesome;
position:relative;
left:10px;
font-size:20px;
}If you find more than one <data:post.body/> then replace all with the codes given below.
<div id="post-toc"><data:post.body/></div>It is quite simple and easy to do.
The first thing you need to do is paste the Html code given below in the blog post, where you want to show the table of content.
I will recommend you to paste the code after the first paragraph of your blog post.
<div class="mbtTOC">
<button onclick="mbtToggle()">Contents</button>
<ol id="mbtTOC"></ol>
</div>
<script>mbtTOC();</script>You have successfully created an automated toc for your blog post.
Note:- This project has developed by sayemtutorial.blogspot.com so big shout out for them.But don’t worry, I will help you to create easy to load and stylish TOC with only HTML and CSS.
But keep in mind that this table of content has only made with XML and Javascript codes, so it can make your blog too heavy to load.
And it is also not stylish to look at…
How to add a Table of Content in Blogger with HTML and CSS
It can be an easy task to create Toc in Html and CSS for a web developer but it can not be an easy task for a non-techy person.But here, I will you show you step by step method which will be comfortable for both techy and non-techy person.
Here is the deal
.mb-toc {
border: 2px solid #ddd;
background: #ececec;
padding: 5px 20px 20px;
margin: 40px 0;
font-size: 18px;
overflow: hidden;
border-radius: 5px;
}
.mb-toc h2 {
margin: 10px 20px;
font-size: 30px;
}
.mb-toc ul {
margin: 0;
list-style: none;
float: left;
width: 100%;
}
.mb-toc ul ul li a {
padding-left: 45px;
}
.mb-toc ul ul li {
background: none;
}
.mb-toc li {
list-style-type: none;
position: relative;
margin: 0;
cursor: pointer;
background: #f7f7f7;
float: left;
width: 100%;
}
.mb-toc li:nth-child(odd) {
background: #fff !important;
overflow: hidden;
clear: both;
}
.mb-toc li:nth-child(odd) li:nth-child(odd) {
background: none;
}
.mb-toc li:nth-child(even) {
background: #f7f7f7 !important;
overflow: hidden;
clear: both;
}
.mb-toc li:nth-child(even) li:nth-child(odd) {
background: none;
}
.mb-toc ul>li:hover>a {
background: #fffcd1;
}
.mb-toc li a {
color: inherit;
padding: 8px 0 8px 25px;
float: left;
border-bottom: 1px solid #ddd;
width: 100%;
text-decoration: none;
}Dashboard >> Layout >> Theme Designer
Advanced >> Add CSS
Step 3:- In this step, you have to paste the HTML codes given below to your blog pages and posts. You need to paste this code in your blog post and page every time you want to display a Table of Content.
<div id="toc" class="mb-toc">
<h2>Table Of Contents</h2>
<ul>
<li><a href="#headingid1">1. Your heading text </a></li>
<li><a href="#headingid2">2. Your heading text</a></li>
<li><a href="#headingid3">3. Your heading text</a></li>
<li><a href="#headingid4">4. Your heading text</a></li>
<li><a href="#headingid5">5. Your heading text</a></li>
</ul>
</div>
You have successfully created a stylish looking and easy to load the table of contents for your blog.
Conclusion:- Ahha You are done, You have created a good looking and SEO friendly table of contents for your blogger blog post and pages.
This custom-designed TOC will help you to attract the user’s attention.
However, do let me know if you are having any problems?
![[How to Fix] Blogger Breadcrumb Error | Data-vocabulary.org Schema Deprecated](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg0ETEry-tVZNSU9j62x07UnI2LC2pAgRJZxC7GqoN1SYtObk7dQ6j-qHC8xaRQ5aFZiphCgSaq0oLZGXIsq54u24cZjcjEJgPjyfgO2mDsLdShTNjoYRR3ZN3gjxSwHYB4fw0DIS-6Q/s640/How-to-fix-Blogger-Breadcrumb-Error.png "[How to Fix] Blogger Breadcrumb Error | Data-vocabulary.org Schema Deprecated")
