Table of Contents is a a table which appears almost beginning of a post or article and holds a list of sections of the page. Blogger table of contents widget is needed if you are blogging with Google Blogger. Mostly a table of contents hold all headings in the article. They have a link to the specific heading section. When someone click to a content the clicked heading section will be appeared on the screen.
If you use a coded static website then you can create a table of contents manually or a function. When you use wordpress you can create a table of contents using plugins. That is easy. But Google have limited feature for Blogger. If you are blogging with Google Blogger you need to create Blogger Table of Contents Manually or add from our website.
Why Blogger Table of Contents is Required?
Table of content is required for many reasons. Here I will discuss some:
- Section Dividing: If you have a table of contents in blogger then you can easily identify which part of your article belongs to which sections. Because, table of contents sequentially integrate all your headings.
- Have an Overview: A table of content tells the user what is in the article. Because all headings are included in table of contents. And headings relates to the description written just after. So user can define whether he/she have necessary information.
- Go to Section: Some articles may be larger like 5K words or more. And you may not need to read the whole article. Or you are not interested. In this case if you don’t have a table of contents user will leave your site. If you have a blogger table of contents widget user can easily find the section he requires.
- SEO Benefits: Search Engines are more likely to search across a well defined article. If your article doesn’t have necessary headings and they don’t sense a lists then search engines will ignore your articles. Imagine a scenario, there are two book selves. Left one have all books unsorted and right one have all books sorted. If I ask, from which self will you prefer to pick a book. The answer will be right self. Because right self is sorted. It have some specified lines of books. It is easy to find a book here. Similarly if you have a blogger table of contents in your article search engines will prefer more likely to index your article in high rank.
How to Add A Blogger Table of Contents Widget?
Unlike other website builders blogger doesn’t have a build-in widget to create Blogger Table of Contents Automatically. So, we have to do this task manually. By manual actions we can add or generate a table of contents for blogger. There are two way to add blogger table of contents widget. They are:
- By Adding Scripts to the template. This one will add a javascript function to your template. So each time you create a new post you just need to add a simple code fraction in your post to include Blogger Table of Contents widget. This reduces your further jobs. But be sure you understand basic xml and html. Because if you make a mistake your template will not work anymore. If you are not expert in this work you can hire a web developer. To hire me at reasonable price Send a Mail.
- By Adding Manual Code or List to each post. This is not recommended. Because in this case you need to add a long code in each post. As a result you page loading time will increase. That may decrease your traffic. Or you can add a list to each post. That will benefit you but this will not look like professional. If you apply custom css for your list this may help you but you need to create table of contents for each post by hand which is a bit harder. I will show both.
Add Scripts in Template to Create Blogger Table of Contents
Here is step by step direction to add scripts in your template. Follow the instructions and see the screenshots.
Step-1: Login to your Blogger Account.
Step-2: Go to Theme.
Step-3: Click the Down Arrow just after Customize.
Step-4: Click on ‘Edit HTML’.
Step-5: Find End of </head> tag. If you think it is hard then click on Jump to Widget button and select the first widget. Then scroll a bit up. You will find end of head tag within 10 lines before of this widget.
Step-6: Paste the Below Code just above </head>.
<!-- TOC Start -->
<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[
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>
<style>
.mbtTOC{border:5px solid #003080;box-shadow:1px 1px 0 #EDE396;background-color:#4368b1;color:#fff;line-height:1.4em;margin:10px 0px 10px 0px;padding:20px 20px 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:#fff;text-decoration:none;}
.mbtTOC a:hover{text-decoration:none; color:#ffeebb}
.mbtTOC button{background:#4368b1; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#fff;padding:0px;}
.mbtTOC button:after{content: "f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}
</style>
<!-- TOC End || Another Line <div id="post-toc"><data:post.body/></div> -->
Step-7: Find <data:post.body/> in your template. It appears almost before breadcumbs in most templates. If you are unable to search this way then download the template and search with a editor. Then go to web template and replace it to the following code.
<div id="post-toc"><data:post.body/></div>
Step-8: Now Create a Post. Go to HTML view.
Step-9: Paste the Below code where you want to add blogger table of contents widget.
<div class="mbtTOC">
<button onclick="mbtToggle()">Table Of Contents</button>
<ul id="mbtTOC"></ul>
</div>
Step-10: Add the below code to end of your post. Then you are done.
<script>mbtTOC();</script>
Add Manual List to Each Post to Create Table of Contents
To add Blogger Table of Contents to each page manually you need to follow below steps.
Step-1: Create A Post and write your content.
Step-2: Open HTML View.
Step-3: Insert the below code where you want to add blogger table of contents widget.
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style>
.mbtTOC{border:5px solid #003080;box-shadow:1px 1px 0 #EDE396;background-color:#4368b1;color:#fff;line-height:1.4em;margin:10px 0px 10px 0px;padding:20px 20px 20px 10px; font-family:oswald, arial;display: block;width: 70%;}
.mbtTOC ol,.mbtTOC ul {margin:0;padding:0;}
.mbtTOC ol li,.mbtTOC ul li {padding:15px 0 0; margin:0 0 0 30px;font-size:15px;}
.mbtTOC a{color:#fff;text-decoration:none;}
.mbtTOC a:hover{text-decoration:none; color:#ffeebb}
.mbtTOC button{background:#4368b1; font-family:oswald, arial; font-size:20px;position:relative; outline:none;cursor:pointer; border:none; color:#fff;padding:0px;}
.mbtTOC button:after{content: "f0dc"; font-family:FontAwesome; position:relative; left:10px; font-size:20px;}
</style>
<div class="mbtTOC">
<button>Table Of Contents</button>
<button onclick="document.getElementById('mbtTOC').style.display='none';" style="float:right";>✖</button>
<ul id="mbtTOC">
<li><a href="https://www.yourwebsite.com#id1">ABC</a></li>
</ul>
</div>
Step-4: Add All your headings inside <ul></ul> tag as list item.
Step-5: Go to Each heading listed and Set a Unique ID.
Step-6: Add URL to Each List Item with hastag of id. For example: href=”https://www.yourwebsite.com#id1″
I think you are understanding why manual table of contents is not recommended. So, update your template as instructed and enjoy blogging. If face any problem you can comment. Share to help other bloggers.
See Also: Fix your windows mail error
