Create an Automatic Table of Contents (TOC) on Blogger
%20on%20Blogger.png "Create an Automatic Table of Contents (TOC) on Blogger")
Are you tired of manually creating a table of content (TOC) for your blog posts? Do you struggle to keep your content organized and easily accessible for your readers? If so, you're in luck. In this post, we'll show you how to create an automatic table of content (TOC) on Blogger, making it easier for your readers to navigate your content and for you to manage your blog.
Why You Need a TOC on Blogger
Before diving into the steps, let's understand why a TOC is beneficial:
- Improves User Experience: Readers can quickly find the information they need without scrolling through the entire post.
- SEO Benefits: Search engines like Google prefer well-structured content, which can improve your rankings.
- Enhanced Navigation: Helps readers easily navigate through long posts.
How to Create an Automatic Table of Content (TOC) on Blogger
Creating an automatic TOC on Blogger is relatively simple. Here's a step-by-step guide to help you get started:
Step 1: Sign in to Your Blogger Account
Log in to your Blogger account and go to the dashboard of the blog where you want to add the TOC.
Step 2: Go to the Theme Section
On the left sidebar, click on the "Theme" section. This is where you'll make the necessary changes to your blog's HTML.
Step 3: Backup Your Theme
Before making any changes, it's crucial to backup your theme. Click on the "Backup/Restore" button in the top right corner and download your current theme. This ensures that you can restore it if anything goes wrong.
Step 4: Edit HTML
Click on the "Edit HTML" button to open your theme's HTML code. This is where you'll add the TOC code.
Step 5: Add TOC Code to Your Theme
Scroll down to find the </head> tag. Just above this tag, copy and paste the following code:
<style>/* 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;}</style>
Step 6: Add TOC Script
Next, find the </body> tag. Just above this tag, copy and paste the following script:
<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>
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
Creating an automatic table of content (TOC) on Blogger is a simple and effective way to enhance your blog's readability and user experience. By following the steps outlined in this post, you can create a TOC that is both functional and visually appealing. Remember to use consistent headings, keep your headings short, and customize your TOC to fit your blog's style and design. With these tips and tricks, you'll be well on your way to creating an effective automatic TOC on Blogger.
