Table of Contents

Table of Contents Free code

The photos are given below. Look at those photos and insert the codes properly, then everything will be fine.

Background blogger theme Add html code </b:skin> UP

code:

/* 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}

Background blogger theme Add html code </body> UP

Code:

<script async='async'>

var head,newLine,el,title,link,ToC=&quot;<nav class='table-of-contents' role='navigation'><h3 onclick='toc()'>&#10145;&#65039;Table of Contents</h3><ul style='display:none'>&quot;;$(&quot;article h2, article h2, article h3, article h5&quot;).attr(&quot;id&quot;,function(arr){return &quot;point&quot; + arr;});$(&quot;article h2, article h2, article h3, article h5&quot;).each(function(){el=$(this),title=el.text(),link=&quot;#&quot;+el.attr(&quot;id&quot;),ToC+=newLine=&quot;<li><a href='&quot;+link+&quot;'>&quot;+title+&quot;</a></li>&quot;}),ToC+=&quot;</ul></nav>&quot;,$(&quot;.toc-pro&quot;).prepend(ToC);function toc() {$(&quot;.table-of-contents ul&quot;).toggle();}</script>

Paste this code where you want to add the Table and Content button.

 Code:

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