ब्लॉगर पोस्ट में Table of Content कैसे लगाएँ?

Step 1: CSS सबसे पहले आपको नीचे वाला CSS Code कॉपी करना है फिर ब्लॉगर के Dashborad में जाना है वहाँ आपको थीम पर क्लिक करना है उसके बाद आपको Coustomize के साइड वाले Icon पर क्लिक करना है अब आपको Edit HTML पर क्लिक करना है आपको Ctrl+F दबा करके ]]> को Search करना है इसके बाद पूरे CSS Code को इसके ठीक ऊपर Paste कर देना है

/* TOC */
.table-of-contents{flex:auto;background: #fff; font-size: 17px; padding: 11px; box-shadow: inset -1px 1px 6px 0px #5e26cd; border-radius: 12px; 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}

Step 2: Java Script

• अब आपको नीचे का Java Script Code को कॉपी कर लेना है
• अब आपको Ctrl+F दबाकर </body> को Search करना है
• इसके बाद पूरा Java Script Code को इसके ठीक ऊपर Paste कर देना है। 

अब आपको Save कर देना है। 

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

Step 3: HTML

• अब आपको नीचे दिया हुआ HTML Code को कॉपी करना है
• Blogger Dashboard में वापस आना है
• अब आपको जिस पोस्ट में Table of Content लगाना है उसको ओपन करिए
• अब 🖍 Icon पर क्लिक करके html view पर क्लिक कीजिए 
• इसके बाद आपको सबसे पहले Heading या H2 के ठीक ऊपर HTML Code को Paste कर दीजिए।

इसके बाद पोस्ट को Update या Publish  कर दीजिए। 

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