3 Ways to Create Powerful Table of Contents for Blogger Blogspot Post

table of content blogger post

In previous post I introduced with Table of Contents and its advantages. In this post I will discuss 3 best way to implement these Contents in your blogger blog post. Remember this tutorial is made especially for Blogspot post but not for sitemap. You can directly generate sitemap page using a quick google search. I advise you to go with this this tutorial.

I would like to skip intro for the actual tutorial. Remember to add your alternate suggestion in comment section.

How to Insert Table of Contents in Blogger Blog Post?

As I already stated that there are 3 ways to do so. However each of them has their own advantage and limitations. As blogger is not an absolute suite and made entirely of HTML5 and xHTML. In order to create content table in blogger post you should have basic HTML knowledge. Or will to f*** (mess) with your code.

Second, make sure to use Notepad ++ or MS Word in order to write post. Blogger post editor insert unnecessary HTML tags while writing. So better ignore it for a while. Insert images after generating your SEO friendly code.

So, are you read to start? Let’s follow the guide.

HTML Table of Contents Generator by Code Project

This tool is made by Andrew Peace and hosted on Code Project. This table of contents tool is not made for Blogger in any mean and it works simply for HTML. But, we can hack it for using it for our purpose. Right?

Yeah. There are two ways of doing so.

  • First, if you plan to insert ToC in your old blog posts. Make sure to visit your blog post URL and copy down the entire content. Like this.
  • Insert the appropriate heading tags where necessary. If you have inserted any special div, make sure to put those on the appropriate placement. Our motive here is to create a clean HTML content.
  • Copy the image tags and insert on the proper placement.
  • Insert the below tag to the location where you want your index to be displayed. This program required the below tag in order to generate new HTML code.
<!-- INSERT contents -->

  • Save this file in Desktop with extension .HTML.
  • Download this tool from codeproject. Use this link to download. Unzip it and put in your desktop folder.
  • Double click to open it.
  • Browse the file which you just saved in File to Process.
  • For Output File, click on browse and enter a file name. Like, newblogpost.
  • Click Option in case you want to make any change. This section is self explanatory which you can try by yourself.
  • Click on build to generate your code.

Now. Right click on your newblogpost.html file and click “Edit”. Copy the entire code and paste it into your Blogger post editor. Click on preview to see is everything as required or not.

Update the post and here is your new SEO and viewer friendly post.

Automatic Table of Contents by CSS Tricks

Thanks to Chris Coyier of CSS tricks to bring this amazing free code for us. Automatic Table of Contents jquery plugin requires a bit of installation to work. As this coding is his citated work. I would not like to make any change and use it as it is. This simple jquery coding automatically generate table – of – contents in html web page.

Honestly, this would be a hell lot easier to implement in your blog post than previous one.

  • Visit CSS Tricks and scroll down to the example.
  • Head back to the script page. From JS section, copy down the entire content and paste it in Google Keep.
  • Open you blogger and head to Theme. Click on Edit Theme.
  • Now in your Theme editor, hit CTRL + F and search for /body. Add below code just above the /body and paste the JS content between both tags.

I have created a dedicated tutorial for this technique. Its a bit hard to use it in your blogspot blog. But, it worth every effort because using this CSS tricks code. You will be able to put table of content on your all post without posting piece of code everytime. Here is a link to full tutorial.

Using the Pure HTML Code

The third and my favorite way to put it in blogger is using Table of Contents Plus source code (here). Don’t be afraid buddy, this WordPress plugin is open source and you can utilize its code for your own purpose.

Even though it just a piece of code using anchor tag for navigation. It give you the freedom to create sub headings. And it allow customization.
But,, it is complicated for newbie. Or those who are new to blogger editor indeed. Anyway, let’s head to the tutorial.

  • Copy down the entire HTML post into Notepad ++.
  • Copy down the HTML coding from codepen.
  • Paste the code where you want it to display.
  • Now you need to notice two things. First, the URL. URL will be your post URL which will be the same for all list items.
  • Second, ID. You can create id as simple as ID1, ID2, ID3 or list_item_1. Which ever you prefer.
  • Now head to your notepad ++ and search for heading text. Enclose your heading between below code.
    <span id=”list_item_1″> … </span>For eg –
<h3><span id="list_item_1">1. First Item</span></h3>

  • Remember, the id here must be as same as previous coding.
  • Update your post and preview it.



Blogger uses URL parameter when view in mobile. In case your URL is something like http://www.example.com/example-page. In mobile view it would be http://www.example.com/example-page?m=1. So, you will face this issue with the 3rd method. For 1st and 2nd it would not affect at all. Need a fix? Subscribe to our Blog from the sidebar.

Our first and second method is not quite robust and required clean coding. Clearing unnecessary tags from the blogger HTML post takes lot of time. You need to be a patient person and should have knowledge of HTML to do it.

Make sure to backup individual post or take full blog backup before doing anything. Chances of screwing HTML post are higher because of clumsy coding.

If you need any help regarding anything stated above. Make yourself home and speak it out from the comment section.


  1. I have used your third method, pure HTML code, and it works perfectly on my website, look:
    Thanks, you really helped me a lot, and it looks much better now! (I have added the table of content in only one post for now! ha ha)

    On the other hand, as you said, it doesn’t work in the mobile version!😢
    If I click on any link of the table of contents while using my phone, it just refreshes the page, that’s all.
    Can you tell me if there’s anything I can do so that the table of contents work on mobile too?

  2. Hello thanks for this 3 methods.
    However, the 1st and 2nd methods looks complicated and a bit hard to understand.

    And the 3rd method HTML code where you hyperlinked the table of content plus plugin is not directing me to the code, after clicking it and it takes me to shore.st URL shortener ad site, it redirects me to google.com

    I had to use another method on my blogger site – Fatdecimatorreview4u.blogspot.com which kind of looks similar to your 3rd method that I couldn’t access the link. It has sub-level/multi-level feature, but I don’t like it because it doesn’t have show/hide button and it doesn’t work effectively on mobile as you said, only on PC.

    Pls how can I make that(show/hide button and mobile efficient) happen?

    The method you used to create yours in this post is perfect and what I like(sub-levels, works well on PC browsers and show/hide button). I noticed you’re blogging on WordPress and used Table of Content Plus Plugin to do it. The Plugin handles everything I stated.

    Is there a way I can use the plugin on my blogger website?


Please enter your comment!
Please enter your name here