How to Add Table of Contents in Blogger

Table of Contents (ToC) is an amazing tool to improve navigation experience for readers within a blog post. A well-structured navigation helps readers navigate a long article easily. It also helps search engines to understand the page structure and provides better engagement and lower bounce rates.

Since Blogger doesn't allow you to install plugins like WordPress, you have to set up the ToC script manually. Don't worry. It's an easy process. In today's tutorial, I will show you how to add table of contents in Blogger.

What is a Table of Contents?

A Table of Contents (ToC) is a list of all the headings and subheadings within a blog post presented in a tabular format. It appears at the top of a post or page and provides readers with an organized overview of the content's structure.

Advantages of Using Table of Contents

• Improves the overall look and feel of a post.
• Keeps readers engaged and interested.
• Organize your post's topics systematically.
• Allows your audience to navigate a post easily.
• Provide a better user experience.
• Reduce bounce rate and increase session duration.

Note: Please back up your existing template before making any changes to it to ensure you can restore it if needed.

Steps To Add Table Of Contents In Blogger

Follow the steps below to add an automatic Table of Contents to your Blogger site:

1. Go to your blogger dashboard.

2. Navigate to the "Theme" section from the left sidebar.

3. Locate the "Customize" button and click on the down arrow.

4. Click on "Edit HTML"

5. Find the </body> tag and paste the following script just above the tag.

<b:if cond="data:view.isPost">
<script>/*<![CDATA[*/
document.addEventListener("DOMContentLoaded",(function(){const e=document.querySelector(".Blog .post-body");if(!e)return;const t=e.querySelectorAll("h2, h3, h4, h5, h6");if(t.length<2)return;const n=document.createElement("div");n.id="toc-post";const o=document.createElement("div");o.id="toc-header",o.innerHTML='\n        <span id="toc-title">Table of Contents</span>\n        <a id="toc-toggle-btn" title="Table of Contents" href="javascript:;" role="button">[Hide]</a>\n    ',n.appendChild(o);let l=document.createElement("ol");l.id="toc-list",l.classList.add("is-visible"),n.appendChild(l);let c=l,i=2;t.forEach(((e,t)=>{const n=parseInt(e.tagName.slice(1)),o="toc-heading-"+t;e.id=o;const l=document.createElement("li"),d=document.createElement("a");if(d.href="#"+o,d.textContent=e.textContent,l.appendChild(d),n>i){const e=document.createElement("ol");c.lastElementChild.appendChild(e),c=e}else if(n<i)for(;n<i;)c=c.parentElement.closest("ol"),i--;c.appendChild(l),i=n}));const d=e.querySelector("p");d&&d.insertAdjacentElement("afterend",n);const s=document.getElementById("toc-toggle-btn");s.addEventListener("click",(function(){l.classList.toggle("is-visible"),s.textContent=l.classList.contains("is-visible")?"[Hide]":"[Show]"}))}));
/*]]>*/</script>
</b:if>

6. Find ]]></b:skin> and paste the CSS code just abovethis line.

#toc-post{position:relative;display:inline-block;background:#f9f9f9;overflow:hidden;font-size:14px;color:#666;line-height:1.6em;border:1px solid #e0e0e0;border-radius:4px;padding: 20px;margin: 0;}
#toc-post ol{counter-reset:wp;padding:0 0 0 16px;margin:10px 0}
#toc-post ol > li{counter-increment:wp;list-style:none}
#toc-post ol > li:before{display:inline-block;content:counters(wp,'.')'.';margin:0 5px 0 0;}
#toc-header{display:flex;justify-content:space-between;align-items:center;padding:0;margin: 0;}
#toc-title{display:block;padding:0 1.25rem 0 0;margin: 0;font-size: 18px;font-weight: 400;}
#toc-toggle-btn{display:block;font-size:14px;font-weight:400;color:#2196f3;margin:0 0 0 auto;padding:0}
#toc-toggle-btn:hover{color:#2196f3;text-decoration:none;}
#toc-list{padding:0 16px 10px;margin:0}
#toc-list:not(.is-visible){display:none}
#toc-list ol{padding:0 0 0 16px}
#toc-list li{font-size:14px;margin:8px 0}
#toc-list li a{color:#666;text-decoration:none}
#toc-list li a:hover{text-decoration:underline}

7. Find the code: <data:post.body/> and replace with the following code.

<div class="post-body"><data:post.body/></div>

8. Click on the "Save" icon to save your changes.

That's it! You have successfully added our automatic ToC script to your Blogger posts.

Final Thoughts

Adding a well-structured Table of Contents is a win-win for both you and your readers. Remember, it not only makes your content more accessible but also improves its visibility in search engines.

However, keep in mind that simply adding a ToC is not enough to boost rankings; you must also publish high-quality content regularly.

If you encounter any issues with the provided code, please leave a comment below, and I will be happy to assist you.