How to add Table of contents(TOC) in blogger post

 Add a Table Of Content In Blogger blog post to simplify your post structure and user-friendy. Table of Content in Blogger blog post makes it easy to read the post for the reader.

Today,in this article I will show you how to add a table of content in Blogger. Adding a table of content in WordPress is very easy. But it’s very difficult to add a table of content in Blogger, as Blogger does not support (TOC) Plugin.

But I will teach you how to add a table of content in Blogger. Before adding this to your blog you should know some benefits of having a table of content in Blogger blog post. 

Also read :How to Add Link (URL) in a blogger post comment.

Follow the few steps given below :

Step 1 - First of all you have to open blogger and go to edit HTML.

Then, Find </head> tag in the HTML file and paste the below-given code just above the </head> tag ( use : ctrl + f  for search the tag ).

<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>

Step 2 - Now you have to find ]]></b:skin> code in your Blogger blog and paste the below-given code just above.

.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;}

Step 3 - Then you have to find <data:post.body/> code in your theme and replace with this new code. If your theme has this code more than one time then you have to replace all with the below given code.

<div id="post-toc"><data:post.body/></div>

Step 4 - You have to add this HTML code on the blog post, in which you want to show table of contents. You have to add this code to every single post/pages you want to show a table of contents. 

So you have to go to your blog post and click on Edit, then click on compose to HTML. Add this below-given code where you want to show the TOC.

<div class="mbtTOC"> <button onclick="mbtToggle()">Table Of Contents</button> <ul id="mbtTOC"></ul> </div>

Step 5 - Finally, paste this code at the bottom of your blog post. 

<script>mbtTOC();</script>

Benefits of Table Of Content (TOC)

By adding a table of content in Blogger blog posts, you make your blog post well structured and user-friendly. Add a table of content in blogger to get a better result. Importantly you SEO incease.

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.

Conclusion

Thank you for reading this article, I hope this article helped you to add table of content in Blogger.Please do share with your friends and follow us for regular updates.