Table of Contents (ToC) is a valuable tool that improves the navigation experience for readers within a blog post. A well-structured ToC helps readers to easily navigate a long article. It improves seo and provides better engagement and lower bounce rates. In Blogger, you can’t install a ToC plugin like wordpress. However, you can set up an automatic ToC in blogger through template editor. In this tutorial, I will show you how to add a Table of Contents in Blogger.
What is a Table of Contents?
A Table of Contents (ToC) is a list of all the heading and subheading within a blog post presented in a tabular format. It appears at the top of a post or page and provides readers an organized overview of the contents structure.
Advantages of Using Table of Contents
Using a table of contents can be beneficial for both bloggers and readers. Below are some key benefits:
- Improves the overall look and feel of a post.
- Keeps readers engaged and interested.
- Organize your post’s topics systematically.
- Allows your audience to easily navigate a post.
- Provide better user experience.
- Reduce bounce rate and increase session duration.
Note: Please back up your existing template before making any changes on it to ensure you can restore it if needed.
How To Add Table Of Contents In Blogger?
Follow the steps below to add an automatic Table of Contents in your blogger site:
1. Log in to your blogger dashboard.
2. Go to “Theme”.
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 above this 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 an automatic ToC on your blogger posts.
Final Thoughts
Adding a well structured Table of Contents is a win-win for both you and your readers. Because it not only makes your content more accessible but also improves its visibility in search engines. But keep in mind that simply adding a ToC is not enough to boost your search engine rankings, you must also publish high quality content.
If you encounter any issues with the provided code, please leave a comment below and I will be happy to assist you.
