HTML Table Of Contents can be a very useful tool for a blogger. It can help to increase the usability and User experience on a blog. Which is taken very seriously by the search engines and they rank those blogs higher in the search results. So if you’re a blogger and have a blog on Blogger platform. Then this tutorial will be very useful for you becuase I will guide you on how to add a table of content in it. I will also show you how you can add the table of contents in every single blog post.
So if you want to know how to add it then continue reading the article. Unfortunate like WordPress, we don’t have any plugins in Blogger to enhance it’s features. So we need to add this table of content (TOC) manually in our Blogger blogs. Anyway, so let’s see how it can be added in Blogger.

 

Features

  • This table of content is really amazing with show/hide feature to display or hide the table
  • it’s quite unique and elegant way of displaying all the headings
  • It’s interface is quite simple and easy to understand
  • It makes the navigation process much easier
  • It can easily be customized to fit to your blog design

Benefits Of Adding Table of Contenys (TOC)

  • It allows to increase usability and User experience which is highly recommended by the search engines
  • Readers can easily navigate to different sections of the post
  • It can also help to increase the click through rate which is another very important ranking factor
  • It helps to boost search engine optimization because Google and all other major search engines gives much importance to user experience
  • It gives a blog a professional look and visitors like to spend more time there

Adding HTML Table Of Contents (TOC) In Blogger

To add this table of contents in a Blogger blog, please follow the below instructions:
Step 1: First of all open your Blogger dashboard and select the blog from the drop-down at the top left, where you want to add the table of contents.
Step 2: Nest opens the theme section by clicking on the theme from the left navigation. And then click on edit HTML link to open the theme coding.
HTML Table of Contents - Learn How to Add in Blogger Posts
Step 3: Next click inside the coding area and press CTR+F keys together from your keyboard. This will open a search box. Where you need to write ]]></b:skin> in it and press the ENTER button to find that tag. This will highlight that. So after finding it, you need to click on the button below to get the code which you need to paste above ]]></b:skin> tag.
 
 

 

HTML Table of Contents - Learn How to Add in Blogger Posts

 

Customization

You can customize the background color of this table of content and also edit the button background color, text color and font styles to make it compatible to your blog.
Step 4: After that, you need to search again for the </head> tag by typing in the search box. And after that copy the code by clicking the below button and paste that code before </head> tag

 

 

HTML Table of Contents - Learn How to Add in Blogger Posts

 

 

Step 5: Now this time search for <data:post.body> and then replace it with the below code.

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

Step 6: After adding all these press the save theme button at the top.

Display Table Of Content In Blog Posts

The table of contents has been created but we still need to blog posts. To display this table of content in blog posts, we need to add a small piece of code in every blog post as well.
So for that, either create a new blog post or edit an existing one. So open a post in editing mode and switch the editor to HTML mode.
HTML Table of Contents - Learn How to Add in Blogger Posts

 

 

Now place the below code where you want to show this table of content in that blog post.

<div class=”mbtTOC”>
<button onclick=”mbtToggle()”>Contents</button>&nbsp; &nbsp;
<br />
<ol id=”mbtTOC”></ol>
</div>

 

Note: You can change the “Contents” text to whatever you want to display.
In the final step, we need to activate this table of content. So it will start appearing in that post. For that simply put the below script at the end of the post.
<script>mbtTOC();</script>


And that’s it!

You have successfully added the table of content in that blog post. You can view that blog post to ensure that everything is working properly. And now you will see the table of content in it.

Conclusion

HTML table of contents can be a very useful tool to improve user experience and usability. Which can help to increase the rankings. That’s why it becomes an important aspect of on page SEO. So every blogger show tries to add the table of contents (TOC) in the blog to gain all the potential benefits.
Categories: Blogging

Leave a Reply

Your email address will not be published. Required fields are marked *