How to Add a Floating Table of Contents in Blogger Website (2025)

Hey what’s up everyone! In today’s article, I’m going to show you how we can add a table of contents to your Blogger website.

I already made two articles around the table of contents for Blogger websites. You can check them out on our channel. In this article, I’m going to show you a different table of contents that you can implement in your Blogger website.

How the Floating Table of Contents Works

Let me just show you how it works.

• We have a table of contents here.
• If I click on it, it will show the table of contents in this format.
• I can easily jump to that section just click on a heading and it will take me to that part.

So, let me click on this heading, and here it is this is the same heading.

Mobile Device Preview

This is how it looks on mobile devices, and it will show the table of contents like this:

• Let me select iPhone SE.
• Click on the table of contents.
• It will always show on the top.

So users can easily switch between headings and read your content.

Step-by-Step Guide: Add the TOC in Blogger

Let’s check how we can add this table of contents to our Blogger website.

1. Identify the Post Body ID

Before that, you need to identify the post ID of the Blogger theme:

• Right-click on the post.
• Click on Inspect.
• Go to the top and click on the main section.
• Expand this section.

You will see something like this:

<div class="post-body" id="post-body">

You need to identify this ID (e.g., post-body). Otherwise, the code may not work on your Blogger theme.

2. Go to Blogger Dashboard

• Click on Theme
• Make sure to take a backup of your theme first
  • Click on Backup
  • It will download the XML file (so you can restore it later)

3. Edit the Theme’s HTML

• Click on Edit HTML
• Scroll down to the end
• Paste the TOC script (shared in the original source)

⚠️ This script will only load in post pages. If you want to load it on all pages, remove the Blogger conditional tag or modify it accordingly.

Customize the Styling

You can modify:

• Background color
• Border radius
• Box shadow
• All these settings are in the CSS section

Desktop Styling Options

• You can change the width
• You can change the box shadow
• You can even move the TOC position (left or right)

Make sure to update your theme’s content ID (post-body) in the script, otherwise it will not detect the heading inside that div class or ID.

Final Result

Now click on Save and refresh the page.

• Open any blog post
• Click on the table of contents
• This is how the TOC will look

✅ The TOC will load in all your post pages ✅ It’s very useful as users won’t have to scroll up to access the TOC ✅ The TOC stays always on the top

Optional: Display TOC on the Right Side

You can also display the table of contents on the right side of your theme.

How to Do It:

• Make some changes in desktop styling
  • Change left to right
  • Swap right to left
  • Adjust the positioning values

Click on Save Refresh the page

✅ The table of contents will now appear on the right side of your blog post.

Customize TOC Button Color

• Right-click on the TOC
• Click Inspect
• Locate the TOC toggle button
• You’ll see its background color
• Change it to a new hex color code (e.g., red)

Search for TOC toggle button in the HTML Update the hex color Click Save

Now your table of contents button will show a red color.

You can change the color according to your website branding.

Final Notes

If you still have doubts regarding the table of contents, feel free to ask in the comment section.

And if you found this article helpful, don’t forget to like and subscribe to our channel for more articles like this in the future.

Thank you!