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.
Anyway, lets start with the code.
The first step is to copy the script into your Blogger template.
- Open the Blogger dashboard and move to Theme tab. From there click on Edit HTML to insert script.
- Now click on the editable space in that page and Ctrl+F and look for /body.
- Just before the closing body tag insert the code from this site.
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.
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.