Table Of Content:
Step:1
Paste
this code above
the closing tag → ]]></b:skin> or ]]></b:template-skin> in your website's main template file (often
named style.css or
similar). This ensures the styles are applied globally to all pages.
/* TOC */
.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color:#2a5365}
.table-of-contents h3{margin:0;cursor:pointer}
Step:2
Paste this code right before the closing </body> tag of your website's main template
file. This ensures the script runs after the page content has loaded.
<script async='async'>
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h3 onclick='toc()'>➡️Table of Contents</h3><ul style='display:none'>";$("article h2, article h2, article h3, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h2, article h3, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}</script>
Step:3
Within each individual blog post, paste this code where you want the TOC to appear. This could be at the beginning or somewhere else that makes sense for your layout.
<div class='toc-pro'></div>