Creating an automatic Table of Contents (TOC) for your Blogger posts is a great way to enhance readability, improve navigation, and boost your SEO rankings. A TOC provides a quick overview of your post’s structure, allowing readers to jump directly to the sections they’re interested in. In this guide, we’ll show you how to create an automatic TOC on Blogger in a few simple steps.
Why Use an Automatic TOC?
A table of contents is a great way to improve the user experience on your blog. It allows readers to quickly scan your post and jump to the sections they are most interested in. This is especially helpful for lengthy articles with multiple headings and subheadings.
An automatic TOC also has SEO benefits. Search engines like Google can use the TOC to better understand the structure and content of your post. This may help improve your rankings for relevant keywords.
How to Add an Automatic TOC to Blogger
To get started, copy and paste the following code snippet into your Blogger theme:
<b:if cond=’data:view.isSingleItem’><script src=’https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.18.2/tocbot.min.js’></script><script>/*<![CDATA[*/ var content=document.querySelector(“.post-body”),headings=content.querySelectorAll(“h2, h3, h4, h5, h6, h7″),headingMap={};Array.prototype.forEach.call(headings,function(e){var t=e.id?e.id:e.textContent.toLowerCase().replace(/[^a-z -]/gi,””).trim().split(” “).join(“-“).replace(/–/g,”-“);headingMap[t]=isNaN(headingMap[t])?0:++headingMap[t],headingMap[t]?e.id=t+”-“+headingMap[t]:e.id=t}),tocbot.init({tocSelector:”.Toc”,contentSelector:”.post-body”,headingSelector:”h2, h3, h4, h5, h6, h7″,hasInnerContainers:!0,listItemClass:”toc-list-item”,orderedList:!1,headingsOffset:1}); /*]]>*/</script></b:if>
This code uses the Tocbot library to automatically generate a table of contents based on the headings in your post.
Add the following CSS ABOVE the closing TAG </style>or ]]></b:skin>.
/* tocbot */ .hidden{display:none;}.tocI:checked~.tocL{right:0;z-index:9999;}.tocI:checked~.tocL .tocC{opacity:0;visibility:hidden;}.tocI:checked~.tocL .fCls{background:rgba(0,0,0,.25);opacity:1;visibility:visible;}@-webkit-keyframes indicator{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}@keyframes indicator{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}.fixH .c::after{content:’\2715′;line-height:18px;font-size:14px;}@media screen and (min-width:768px){.tocC{top:40px;}.tocI:checked~.tocL{z-index:9999;}}.fCls{display:block;position:fixed;top:-50%;left:-50%;right:-50%;bottom:-50%;z-index:1;transition:all .1s ease;background:transparent;opacity:0;visibility:hidden;}.tocL{position:fixed;top:0;bottom:0;right:-280px;width:280px;transition:all .1s ease;z-index:9999;}.tocLi{width:100%;height:100%;position:relative;background:#fff;box-shadow:0 5px 30px 0 rgba(0,0,0,.05);z-index:2;border-radius:12px 0 0 12px;}.tocLs{position:relative;top:20px;background:inherit;}.fixH{display:flex;background:inherit;position:absolute;top:0;left:0;right:0;padding:0 10px;z-index:2;}.tocC{position:absolute;left:-45px;top:105px;transition:all .1s ease;}.tocC span{display:flex;align-items:center;justify-content:center;width:45px;height:40px;border-radius:15px 0 0 15px;background:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,.1);transition:inherit;z-index:1;}.tocC span svg{opacity:.95;width:22px;height:22px;}.tocT{display:flex;width:100%;}.fixT::before{content:attr(data-text);flex-grow:1;padding:16px 10px;font-size:90%;opacity:.7;}.fixH .cl{padding:0 10px;display:flex;align-items:center;justify-content:flex-end;position:relative;flex-shrink:0;min-width:40px;}.tocIn{padding:50px 0 0;overflow-y:scroll;overflow-x:hidden;width:100%;height:calc(100vh – 60px);}.tocIn>ol{padding:0 20px 20px;}.tocIn ol{list-style:none;padding:0;margin:0;line-height:1.5em;}.tocIn ol ol,.tocIn li:not(:last-child){margin-bottom:5px;}.tocIn li a{flex:1 0 calc(100% – 23px);}.tocIn a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:inherit;text-decoration:none;}.toc-list{width:100%;position:relative;box-shadow:2px 0 0 0 #0000001a inset;}.toc-list.is-collapsible .toc-link{padding-left:2.25rem;}.toc-list.is-collapsed{display:none;}.toc-link{display:block;color:#495057;padding:.75rem 1rem .75rem 1.5rem;transition:.5s;}.toc-link.is-active-link{background-color:#eceff1;font-weight:500;box-shadow:2px 0 0 0 #495057 inset;}.docs-toc{–bg-scrollbar-thumb:#ced4da;–bg-scrollbar-track:transparent;}
Finally, install the HTML table of content, open Blogger LAYOUT > ADD GADGET > Select HTML/JAVASCRIPT
Add the following HTML code, then SAVE
<input class=’tocI hidden’ id=’forTocJs’ type=’checkbox’ />
<div class=’tocL’>
<div class=’tocLi’>
<div class=’tocLs’>
<label aria-label=’Tutup’ class=’tocH fixH’ for=’forTocJs’>
<div class=’tocC’>
<span>
<svg xmlns=”http://www.w3.org/2000/svg” width=”16″ height=”16″ fill=”currentColor” class=”bi bi-card-list” viewBox=”0 0 16 16″>
<path d=”M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z”></path>
<path d=”M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1- 5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z” ></path>
</svg>
</span>
</div>
<div class=’tocT fixT’ data-text=’Daftar Isi’>
<span class=’c cl’ data-texxt=’Tutup’></span>
</div>
</label>
<div class=’Toc tocIn scroll’ id=’tocAuto’>
</div>
</div>
</div>
<label class=”fCls” for=”forTocJs”></label>
</div>
Conclusion
Adding an automatic Table of Contents to your Blogger posts is a simple yet powerful way to enhance your blog’s usability and SEO. By following the steps outlined above, you can easily implement a TOC that helps readers navigate your content more efficiently. Happy blogging!