How to Add Table of contents for blogger

 How to add table of contents on blogger

Step 1 

Go to Theme >> Edit Html >> Search >> </body>

Add below </body>

<script async='async' defer='defer'> var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, 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>

After Search for ]]></b:skin>

Add below code Above

/* TOC by MFK (bloginos.com) */ .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 h4{margin:0;cursor:pointer} .table-of-contents h4:before{font-family:FontAwesome;content:"\f0c9";padding-right:7px;} /* For Fontaweosme 5 .table-of-contents h4:before{font-family:'Font Awesome 5 Free';content:"\f0c9";padding-right:7px;} */

Go to Post editor and add this code

<div class='toc-pro'></div>