Create table of contents in Blogger posts: A simplest way

Writing a lengthy post in a blog post is beneficial for both the SEO and blog's value. But, such lengthy content may affect the visitor's readability, mainly if visitors are browsing your blog via smartphone devices. To escape from this effect, you can create a table of contents for the individual Blog post.

In case of WordPress, the popular WordPress TOC plugin 'Table Of Content Plus' gets your job done. But in Blogger, there is no any option to create TOC. Adding HTML and CSS is the only way you can create TOC for each post. This may be little ruining for beginners but it is the same way Plugin creates the TOC. Here in this guide, I am going to illustrate how simple HTML tags can create a wonderful TOC in Blogger post. Anyone who has a blog on Blogger can create this type of TOC.

Table of contents

1. What is a table of content for a blog post?
2. What are the benefits of using TOC?
3. How to create a table of contents for Blogger individual posts?
• Create heading
• Create id
• Create Bullet lists of heading
• Create jump URLs
• Advantages

What is a table of content for blog posts?

Table of contents for a blog post is simply the list of headings or contents or paragraph that exists on the same page where you want to create it. TOC of a post helps visitors to jump specific section of the post, using the normal hyperlink. Most of the Wikipedia pages contain Table of the Content section, you can take them as the best example.

What are the benefits of using table of contents?

TOC can help you to standardize your blog post in various ways. It helps your visitors know what topics are covered in your post. So that they can skip what is not interesting to them, and read only the required section. So, TOC will be in the favor of your readers.

In SEO depart, it will be easier for the Search engines to know about your post content. This will thereby improve the blog's visibilities in SERPs. In addition to this, Table of content may also help your blog to appear in Google answer box for the target keywords. Also, search engines show the section's URL (Below post snippet) in search results if your blog post appears on search engines. So, it will be highly beneficial for SEO too.

On bird's eye view, there are two main advantages of including a table of contents for Blogger blogs:

• Improves readability
• Improves SEO for Blogger blog
• May help blog post to appear in Google Answer Box

How to create a table of contents for Blogger (Blogspot) individual posts?

Creating a table of contents for Blogger post is not too hard (for this method). Even the one who does not have the general knowledge of HTML can also create a table of content for the individual post. Here, I will use simple HTML codes, so that it will be understandable for beginners too.

Create headings or subheadings

The very first thing you should do is to create headings or subheadings within your post. It is a simple process. If you are familiar with creating heading or subheading on Blogger, you can simply skip this section.
You can create headings by two methods: Compose (By general typing) and HTML (By HTML tags). The latter may be a bit time-consuming. So I prefer the first one.
For the first one, select the heading from your post area (I have assumed, you have created a post in Blogger). At the top of the post-area, you can see the Format option. Simply choose heading or sub-heading. Now, you have successfully built the first heading.

Similarly, you can create multiple headings within your blog post. You can also do this through HTML section of your post by using the following HTML at the desired place.

<h2>Your Heading</h2>

Simply replace 'Your Heading' with your heading. Here, H2 is the 'Heading', you can also use H3, H4, ..

Create ids

Once you build the headings, you can then designate each heading with a unique id. To do this, switch to HTML editor of your post and find the heading tags that you previously inserted. And, add id = "UniqueId" in the opening tag of your heading. The final code structure will look like this:

<H3 id = "UniqueId"> Your Heading </H3>

Simply, replace "UniqueId" with a unique id. It can be the first letter of heading or alphabets or numbers. Similarly, insert ids for each heading you have created. Never use the same id for different headings, it must be unique and easily memorable as you will need it later.

Create bullet list of headings

I assume you have already created ids for the headings. Now, switch to 'Compose' section and come back to the first heading. Above the first heading, create another heading named 'Table of content' or simply 'Content' or anything you like.

Below it, type all the heading name you have previously added to your post. You can format those list with bullet list or numbered list. After creating the list of content (Headings), you will have only one thing to do, that is: creating a jumping link.

Create jumping links

This is the crucial part to create a table of content for Blogger posts. As you have already created the TOC, the main purpose of this part is to allow visitors to jump specific part of your blog post, by clicking the titles.
To do this, you need to move back to HTML editor and head over to your TOC section. The initial code may look like this:
<li> Heading 1 </li>
Now, you can create a link to jump specific section of post by adding '<a href = "#Id"> ' code after <li>. Also, don't forget to add closing a tag (</a>) before </li>. The final code should look like this:

<li> <a href = "#Id'> Heading </a></li>

Simply replace Id with the heading Id that you previously created. Similarly, add the same codes (don't forget to use unique id) to all of your list.

You can also do it at 'Compose' option too. But, the Blogger creates unnecessary codes to your id and makes the code not working. So, Never switch to 'Compose' section after creating TOC. And, if you are updating your blog post frequently, I suggest you remove all the unnecessary codes (usually URLs before '#' on HTML editor) before hitting 'Update'.

Finally, you will have a 'table of contents' section in your Blogspot blog post. Don't forget to preview your post to find and fix the possible mistakes.

Advantages:

• Doesn't require advanced knowledge: This type of TOC doesn't require advanced knowledge of JavaScript and jQuery. Anyone can create a table of content for Blogger post by using the above HTML.
• All browser and mobile supported: This type of TOC is supported by all types of browsers. As Blogger adds ?m=1 at the end of URL in mobile devices, most of the TOC doesn't work in mobile devices because of that reason alone. But this simple TOC is mobile responsive and is supported by all major browsers including Opera Mini. UC Mini won't support this type of codes. But, don't worry! It is the problem of the browser, not yours. UC Mini doesn't support the TOC of Wikipedia too.

That is that. This was a full tutorial on creating a table of contents for individual Blogger posts. I hope, it has helped you to do this job smoothly. If you have queries, drop your comments in the comment section below. If you find this tutorial helpful, don't forget to share this post via social media.