How to Insert Automatic Table of Contents for Blogger Blogspot Post

0
395

In previous post I shown you three ways on how to create powerful table of content in Blogger post. Now, in this article I am implementing the technique to insert it into the post. Which means we’re going to put it into action. In the previous post I show you 3 techniques for creating table of content. One of them is using Javascript which I found a better way than other two. Though the manual techniques for table of content is much better but you need to insert it everytime. Using this CSS Tricks Table of Contents, all we have to do is to insert a class tag.

So, lets start with …

Insert table of contents in Blogger Blogspot Post

Before we start let me show you how will it look like into action.

Its not look good as in WordPress. Also, anyone with good Javascript skill can implement more customization. And can also nullify the redundancy. So, if you’re one of them, please help to make this code minimal.

Anyway, lets start with the code.

Table of Content Javascript

The first step is to copy the script into your Blogger template.

  1. Open the Blogger dashboard and move to Theme tab. From there click on Edit HTML to insert script.
  2. Now click on the editable space in that page and Ctrl+F and look for /body.
  3. Just before the closing body tag insert the code from this site.
  4. Click on Save Theme to complete your job with javascript.

Implementing the Code into Blogger Post

Now we have to insert three tags into our blogger post, the first one is <article> which intitiate the Table of Content into blogger. The second is <div class=”all-questions”> which is used to place index into post.

And the third one are qualifiers. It will help you identify which is one is the part of content.

In our code, we have implemented both H2 and H3 as a part of content. So, if you include the qualifier into H2 it will also works as index. If you want to also insert H3, just don’t put the qualifier tags.

If you wish to include H4 heading as content. Make sure to copy download the complete function and paste it and change the heading from H2 to H4.

Now follow the step by step guide to insert ToC into your post.

Open your post and open the HTML view of your code.

From there, put the <article> after the first <div>. Put the closing </article> before the ending </div>

Put the <div class=”all-questions”></div> where you want to insert indexing which is visible on frontend.

Now, go to the heading tags. Taking it as example, <h2 id=”one” style=”text-align: left;”> put id =”one”, id=”two”, id=”three” on headings to make the content. One more example, <h3 id=”two” style=”text-align: left;”>.

In this way, you will be able to make index.

The last step is to customize the CSS to make it looks good.

Customizing the CSS for Table of Contents

In order to customize you need to open the Theme tab and open Edit HTML.

Look out for b:skin into code section using Ctrl + F.

I already have a ready made CSS code available at this link. which you can start using. This look same as the above screenshot.

Here how it is done.

Once done save the theme.

It will make visible changes in your table of content.

Conclusion

I hope that will help you to implement table of contents on your own blogspot website. If you have any more question regarding it. Just make sure to use comment box.

LEAVE A REPLY

Please enter your comment!
Please enter your name here