Creating Table of Contents in Blogger without Code

 Table of Contents

1. Introduction
2. What are Anchor Tags?
3. Create Anchor Tags and Table of Contents in Blogger
4. Scripts for Generating Table of Contents
   

Introduction

Adding Table of Contents to a post provides easy navigation of different sections in the post as well as provides a bird's eye view of different sections in the post. 

Usually one needs to add some custom code to add table of contents in blogger which affects the performance and its not straight forward to do. I have tried a table of contents script out there but ran into few issues which made me abandon it.

With the latest new blogger editor, it is now possible to add Table of Contents in blog posts without any code! The links in Table of Contents works with the help of "anchor tags".

What are Anchor Tags?

Anchor tags are added to the end of the link, making it to go to that specific anchor position in the post.

For example, consider the below Wikipedia link:

https://en.wikipedia.org/wiki/Pi

If you notice the links in its table of contents, they are like:

https://en.wikipedia.org/wiki/Pi#Fundamentals

https://en.wikipedia.org/wiki/Pi#Sources

Here #Fundamentals and #Sources are the anchor tags. 

How to create Anchor Tags and Table of Contents in Blogger?

1. The first step is to create anchor tags for the headings in your blog post. For this, select the heading text and in the menu bar, click on the link icon drop down and select "Create or Edit Anchor"

   

   Create/Edit Anchor Tag option in Menu
   

2. This will show a pop up, where you can create an anchor tag, preferably without spaces.

   

   Specifying the Anchor Tag
   

3. The post link followed by #AnchorTag is the anchor tag link. Eg: https://www.pigenie.com/2020/08/creating-table-of-contents-in-blogger-without-code.html#WhatAreAnchorTags
   
4. You can now create a numbered list for Table of Contents and add hyperlinks with the anchor tags for each heading. You can use relative links - you can just specify # followed by the anchor tag.

   

   Adding URL to Table of Contents
   

   
   

   

   Specifying Relative Anchor Tag Link
   

5. If you would like the user to be able to click a heading to generate an anchor link, you need to add hyper-link to the heading text as well. All Done!
   

Scripts for Generating Table of Contents

If you would like to avoid doing the above way and would like to try your hand at an automated way of generating Table of Contents, below are some plugins/ways to do it:

1. Adding Anchor Links to Headers
   
2. Flat Table of Contents by MyBloggerTricks
3. Nested Table of Contents by MyBloggerTricks
4. CSS Based Table of Contents from MasterTheSEO
5. Shortcode Based Table of Contents by Bloginos

Do you use Table to Contents in your site? Do you use the manual way or do you use any scripts to do it? Let us know in the comments!