How to Add Automatic Floating Table of Contents in Blogger
Hi to, all in this article I am going to tell you all about how to add automatic floating table of contents in your blogger website easily in just few minutes.
So, read the below provided steps carefully to get clear understanding about adding automatic floating table of contents in blogger posts easily without any error or issues.
Basically Table Of Contents is a kind of in page navigation that displays a list of anchor links pointing to the different page sections within the HTML page.
It is beneficial for the article readers, if reader want to read specific section of webpage then table of contents is very useful for reader to shift to the section directly by clicking on the section heading link.
Steps to Add Floating Table of Contents in Blogger
Login to Blogger
First of all you need to visit official blogger website.
Now you need to login to blogger website dashboard by using your login credentials safely.
Backup Blogger Theme
After sign-in to blogger website dashboard, you need to backup your blogger theme, because if any error occur then you can restore your backup theme code again and can run your website as usual and if you want to backup your blogger then you can follow below provided path.
Path: Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Select backup -> Click on download -> Verify captcha -> Save the downloaded file in a safe place for future use.
Open Blogger Theme Editor
After successful backup of your blogger theme, now it's time to open blogger theme editor to add few codes inside it regarding automatic floating table of contents and if you want to open blogger theme editor then you can follow below provided path.
Path: Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.
Adding HTML Code
- Visit blogger theme editor.
- Search for <body> tag.
- Now copy below provided HTML.
- Paste the copied HTML code anywhere in <body> tag.
<b:if cond='data:view.isPost'>
<ul class='toc-module--tableofcontents--9o5Ey css-0' id='tocUl'>
<div class='toc-module--tochead--1veCW css-0' id='tocTrigger'>
<p class='css-1'>TOC</p>
</div>
<div class='toc-module--list--3ZllP css-0'>
<div class='twTOC' id='at_T'>
<ol id='twTOC'/>
</div>
</div>
</ul>
</b:if>
Adding Wrap Code
- Visit blogger theme editor.
- Search for <datat:post.body/>.
- Now copy below code.
- Replace the code with <data:post.body/>.
<div id='post-toc'>
<data:post.body/>
</div>
Adding JavaScript Code
- Visit blogger theme editor.
- Search for </body> tag.
- Now copy below JavaScript code.
- Paste the copied JavaScript code just above </body> tag.
<b:if cond='data:view.isPost'>
<script>//<![CDATA[
$(function(){$("#tocUl").click(function(){$(this).toggleClass("toc-module--slideOut--2iwp0")})});var TOCLirge="on";function twTOC(){for(var t=document.getElementById("post-toc").querySelectorAll("h2"),e=0;e<t.length;e++)t[e].setAttribute("attr","h2");for(var l=document.getElementById("post-toc").querySelectorAll("h3"),e=0;e<l.length;e++)l[e].setAttribute("attr","h3");for(var r=document.getElementById("post-toc").querySelectorAll("h4"),e=0;e<r.length;e++)r[e].setAttribute("attr","h4");for(var o=document.getElementById("post-toc").querySelectorAll("h5"),e=0;e<o.length;e++)o[e].setAttribute("attr","h5");for(var h=document.getElementById("post-toc").querySelectorAll("h6"),e=0;e<h.length;e++)h[e].setAttribute("attr","h6");var n=e=headlength=gethead=attr=0;for(e=0,headlength=document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6").length;e<headlength;e++)getheada=(gethead=document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6")[e].textContent).split(" ").join("_").replace(/(\r\n|\n|\r)/gm,""),document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6")[e].setAttribute("id",getheada),n="<li class='at_toc-"+(attr=document.getElementById("post-toc").querySelectorAll("h2, h3, h4, h5, h6")[e].getAttribute("attr"))+"'><a href='#"+getheada+"'>"+gethead+"</a></li>",document.getElementById("twTOC").innerHTML+=n}
//]]></script>
<script>//<![CDATA[
twTOC()
//]]></script></b:if>
Adding CSS Code
- Visit blogger theme editor.
- Sear for </head> tag.
- Now copy below provided CSS code.
- Paste the copied CSS code just above </head> tag.
<b:if cond='data:view.isPost'>
<style>
.active{color:#f88;font-weight:700}.twTOC{padding:5px 10px}.twTOC,.twTOC ol{list-style:none;margin:0;position:relative}.twTOC ol{padding:5px 0}.twTOC ol li:before{border-radius:50px;color:#222;content:" "counter(toc) ". ";display:flex;float:left;font-size:14px;font-weight:400;line-height:30px;margin-right:5px;padding:0;position:relative;text-align:center;vertical-align:middle;z-index:9999}.twTOC ol li{counter-increment:toc}#twTOC a{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;font-size:15px;line-height:1.2;opacity:.9;overflow:hidden;transition:all .3s}#at_T ol::-webkit-scrollbar{width:3px}#at_T ol::-webkit-scrollbar-track{background:#157ba6;border-radius:0}#at_T ol::-webkit-scrollbar-thumb{background:#153b4b;border-radius:0}:target{background:#40739e;color:#fff!important;padding:5px 10px;scroll-margin-top:70px}ul.toc-module--tableofcontents--9o5Ey{background-color:#fff;border:1px solid #40739e;border-bottom-right-radius:15px;border-left:none;border-top-right-radius:15px;height:auto;left:0;margin:0;max-height:233px;overflow:hidden;padding:0;position:fixed;scrollbar-color:#367ee9 rgba(48,113,209,.3);scrollbar-width:thin;top:50%;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-webkit-transform:translate3d(-93%,-50%,0);transform:translate3d(-93%,-50%,0);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:192px;z-index:9}ul.toc-module--tableofcontents--9o5Ey .toc-module--tochead--1veCW{background-color:#40739e;bottom:0;box-shadow:0 8px 15px #40739e;cursor:pointer;position:absolute;right:0;top:0;width:12px;z-index:5}ul.toc-module--tableofcontents--9o5Ey .toc-module--tochead--1veCW>p{align-items:center;color:#fff;display:flex;font-size:10px;font-weight:700;height:100%;justify-content:center;letter-spacing:3px;margin:0;pointer-events:none;position:absolute;-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transform-origin:center center;transform-origin:center center;width:100%;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}ul.toc-module--tableofcontents--9o5Ey .toc-module--list--3ZllP{height:auto;max-height:233px;overflow-y:auto;padding-bottom:11.2px;padding-top:11.2px;top:0;z-index:2}ul.toc-module--tableofcontents--9o5Ey.toc-module--slideOut--2iwp0{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}
</style>
</b:if>
After adding the three codes, click on save button and it will take few seconds to process the entire theme code and after successful completion of the processing you will get a message i.e. Updated Successfully.
Note
If you get any error any error or issue while saving the code inside theme editor then you need to restore your backup theme code and need to repeat the same process as mentioned in the above steps carefully.
If you wan to change the styles and colors of the table of contents then you need to modify CSS code above provided and for changing colors you need to replace color codes and for color codes you can use google color picker or any other third party color picker websites.
Conclusion
I hope that you have understood about adding automatic floating table of contents in blogger website easily in just few minutes without any errors or issues.
