Table of Contents in Blogger

In this post, I am going to show how you can add a Table of Content ( TOC ) in your Blogger post. As you know, Blogger doesn't support any plugins like WordPress . However, if you wants to add Table of content in your post then you have to design of you own. But many people don't have knowledge of HTML , CSS and JS , therefore they can't design Table of Content.

That's why I am sharing my Table of Content code with you and step by step installation process.

Table of Content

Before we start, let's discuss why you should have a Table of content in your blog post.


Also check : How to start blogging from mobile with blogger.com


TOC helps in SEO

Adding a TOC in your blog post makes your blog more structured, and search engines like Google, Bing and Yahoo rank well-structured blogs.

And if your blog is well-structured then google can display the Jump-To links in the meta description area in Google Search Results.


Better User Experience

User experience is very important in the field of blogging. 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 user to read only the specific part they want to read.



Steps to add Table of Content ( TOC ) in Blogger post 


Step 1: Login to your Blogger Account and blogger the dashboard.


Step 2: Open Theme tab.

        Blogger Menu >> Theme


Theme menu


Step 3: Click on the drop-down button (right to the Customize button) and Edit HTML.


Edit with HTML


This is my code my code.


See the Pen Table of Content for Blogger by Sahil Verma (@sahilpro) on CodePen.


Step 4: Copy code from CSS box from my code and make a <style> inside <head> tag.


Make <style> tag



Step 5: Now paste that code inside <style> tag.


Paste code inside <style> tag


Step 6: Now copy code from JS part  from my code and paste inside <script> tag at the most bottom part of the HTML Editor. Before </script>


Paste inside <script> tag


That's it for that HTML Editor.


Step 6: Open the post in which you want to add TOC or write a new post with Headings.


Step 7: Change Post Editor view form Compose View to HTML view.


HTML view


Step 6: Now copy this selected( from line 3 to line 13 ) portion from HTML part from my code and paste is side your post.


HTML part


Step 8: Open Find in page box Browser's menu or just press Ctrl + F on key board.


Find in page


Step 9: Search for " <h2 " ( you can use any heading from h1 to h6, but h2 is mostly recommended ) , and paste this following text after "<h2" 


Adding class in Headings


 class="strickx-title" 



Note: There must be space between <h2 and class="strickx-title" as follows: 


<h2  class="strickx-title"

 


That's it for your post, and now your Table of Content is successfully added to your post.


Conclusion

I hope that you liked this post and found helpful for your blog. If so please share this post with your friends who would also be add Table of Content on Blogger post. If you find any problem or issues you can comment below.