Create A Professional Table of Contents in your Blogger blog posts
 |
| Image by Shyam Mohan Blog |
Introduction
In this post you have been introduced how you can make table of contents in your blog post.
Using table of contents will improve the seo of your blog posts and will also improve the readability of your posts. You can use this to make posts in your blog professional
Creating a table of contents will make your post easier to read.
The way headings are given in the lesson of the book, we get to know how many topics have been mentioned in the lesson of the book, which makes us easier to read the book.
In the same way, headings are also given in the blog, which shows how many topics have been mentioned in the blog article.
Google also recommends to create a table of contents in the blog
In the same way, you will try to make a table of contents in every post so that the audience gets comfortable reading the article of your blog.
If you are a WordPress user, you can create table of contents through plugins and if you use Blogger, you can create table of contents with the help of coding.
How table of Contents Works?
Table of contents is an overview of the blog post in which the headings and subheadings (h2, h3, h4) of our post remain as hyperlinks which makes it easy for the user to read the content.
With the help of table of contents, the user can click and jump on any headings and the seo and navigation of our post also becomes good.
We will use some HTML, css, java code to create a table of contents in Blogger posts and if you do not know the coding, you can still see below method to add table of contents
Note one thing and make table of contents only in big post because applying table of contents in small post is of no use.
Let us now learn to apply table of contents from step by step HTML.
 |
| Image by Shyam Mohan Blog |
2.After,click on edit html then paste below stylesheet code in starting of <head> as shown in above figure
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
3.After find </head> in your edit html dashboard
 |
| Image by Shyam Mohan Blog |
4.Then paste below javascript as shown in above figure
<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>
 |
| Image by-Shyam Mohan Blog |
6.Then paste below css code as shown in above figure
.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;}
 |
| Image by Shyam Mohan Blog |
 |
| Image by Shyam Mohan Blog |
8.After,paste below code in the place of above code as shown in above figure
9.Then save your theme
<div id="post-toc"><data:post.body/></div>
10.Open your Blogger Dashboard then replace your all heading in this format that you want to show in table of contents as shown in below figure
 |
| Image by Shyam Mohan Blog |
 |
| Image by Shyam Mohan Blog |
11.Then paste below code in your blog post where you want to show table of contents as shown in above figure
<div class="mbtTOC">
<button onclick="mbtToggle()">Table Of Contents</button>
<ul id="mbtTOC"></ul>
</div>
 |
| Image by Shyam Mohan Blog |
12.Paste below script in end of your posts as shown in above figure then update your post.
<script>mbtTOC();</script>
13.After that you can open your blog post and see all your headings will be shown in your table of contents.
Note:You have to paste the above two codes in all the posts in which you want to show the table of contents.
Note: You Can Change those color if you want
- Change background color #FFFFEO
- Change border color #f7f0b8
- Change font color #707037
- Change Anchor link color #0080FF
- Change the font size of anchor Links 15px
- Change the font size of TOC heading text 20px
Post a Comment
Enter comments by following community guidelines