Automatic Table Of Contents For Blogger【NEW】

Long Time Ago, I Posted About Table Of Contents For Blogger On My Blog. But Some Of The Users Commented About Better Design And Less Use Of External Scripts And Stylesheets.

Most Of You May Be Using Wordpress For Simplicity As It Has A Numbers Of Plugins. One Of Them Is An Easy Table Of Contents Or Automatic Table Of Contents. But In Bloggers There Are No Such Plugins!!!.

So I Created An Automatic Table Of Contents For Blogger As Well As For Static HTML Sites.

Table Of Contents Just Aggregates All The Headings In The Page And Arranges Them In A Tabular Format For The Ease Of Searching.

Table Of Contents Also Shows A Link Snippets In The Google Search Result So That The User Can Navigate To The Desired Topic Directly, Thereby Increases Chances Of Ranking Higher In Search Engine.

Along With Search Engine Optimization, User Experience Also Plays A Important Role In Getting A Higher Rank In Search Engine Result Page (Serp) Which Most Of The Bloggers Don't Take Seriously.

A Table Of Content Will Help You To Improve The User Experience Of Your Website.

The Table Of Contents In Bloggers Requires The User To Add The Respective Id Manually In The Href Tags. However, For An Automatic Table Of Contents, The User Only Require To Add A Single Line Of HTML For Generating A TOC.

• No External Javascripts.
• No External Stylesheets.
• Minified And Packed.
• SEO Friendly
• Responsive [PURECSS Grids].
• CSS In Javascript.

1. Login In Your Blogger Account.

   

2. Navigate To The Theme Tab In Blogger Dashboard And Click On Edit HTML.

   

3. Search For </body> In The Template And Copy-Paste Below Script Above Closing Body Tag.

   <script
     src="https://cdn.jsdelivr.net/gh/mdnaik/mdnaik.github.io@main/Auto-TOC/automatic_table_of_contents.min.js"
     integrity="sha384-4qkRiJdHsahNAU1KaaQ5LwgqPPr/9LtlUMtIaRsDq0NLZekAgua23rFrsd2Z63Xo"
     crossorigin="anonymous"
   ></script>

4. After You Paste The Script In Template, Save It And Head Over To Your Blog Post.

5. Paste The Below Shortcode At The Starting Of Your Post.

   <div class="toc-start">

   You Can Paste Above Code Wherever You Want To Display Table Of Contents.

6. Similarly, Paste The Below One At The End Of Your Post.

   </div>

7. Save The Post And See The Result.

If You Face Any Problem Just Comment Down, Will Try To Solve It As Soon As Possible .