How to add Table of content in blogger

A Table of Contents (TOC) is a list of headings or subheadings that appear at the beginning of the article, usually right after the introduction. The purpose of a TOC is to provide readers with an overview of the article's structure and help them navigate through the content more easily.

A typical Table of Contents may include the main sections or topics covered in the blog post, along with their corresponding page numbers or links. Each entry in the TOC corresponds to a specific section or heading within the article, allowing readers to jump directly to the information they are interested in.

Including a Table of Contents in a blog article offers several benefits. It improves the article's readability by breaking down the content into easily digestible sections. It also allows readers to quickly scan the TOC and decide which sections they want to read or skip, based on their individual interests or needs. Additionally, a TOC makes it easier for readers to revisit specific sections of the article later if they want to review or reference certain information.

In online platforms or content management systems, creating a Table of Contents can be done automatically using HTML or Markdown tags. These tags help identify the headings and subheadings within the article, which can then be used to generate the TOC dynamically. Alternatively, authors can manually create a TOC by listing the headings and manually linking them to the corresponding sections within the article.

How to add Table of content in blogger

To add a table of contents in Blogger, you can follow these steps:

• Step 1: Log in to your Blogger account and navigate to the blog's dashboard.
• Step 2: Click on the "Layout" option in the left-hand menu.
• Step 3: In the layout editor, select the location where you want to add the table of contents. It could be at the top or bottom of your blog posts, or in a specific section of your layout.
• Step 4: Click on the "Add a Gadget" option in the chosen location. A pop-up window will appear.
• Step 5: Scroll down and click on the "HTML/Javascript" gadget option. Another window will appear.
• Step 6: In the "Title" field, you can enter a title for your table of contents (e.g., "Table of Contents").
• Step 7: In the "Content" field, you need to enter the HTML code for the table of contents. You can use the following code as a template:

<style> .table-of-contents { margin: 10px 0; } .table-of-contents ul { list-style-type: none; padding: 0; margin: 0; } .table-of-contents li { margin-bottom: 5px; } </style> <div class="table-of-contents"> <ul id="toc"></ul> </div> <script> var toc = document.getElementById('toc'); var headings = document.querySelectorAll('h2, h3, h4, h5, h6'); for (var i = 0; i < headings.length; i++) { var heading = headings[i]; var listItem = document.createElement('li'); var link = document.createElement('a'); link.textContent = heading.textContent; link.setAttribute('href', '#' + heading.id); listItem.appendChild(link); toc.appendChild(listItem); } </script>  

  

• Step 8: After pasting the code, click on the "Save" button.
• Step 9: Finally, click on the "Save Arrangement" button in the layout editor to apply the changes to your blog.

Now, when you publish a blog post with headings (h2, h3, h4, h5, h6), the table of contents will automatically generate links to those headings. It will make it easier for your readers to navigate through the post.