Step-by-Step Guide: How to Add a Table of Contents in Blogger [2023 Update]

 Hello Friends, इस लेख में मैं आपको बताऊंगा blogger blog में Table Of Content कैसे लगाते हैं। वैसे यह option WordPress में एक Plugin की मदत से आसानी से लग जाता है लेकिन Blogger में थोड़ा सा मेहनत करना पड़ता है। Table of content को ब्लॉगर में लगाने से बहुत फायदे होते हैं जैसे की आपका ब्लॉग पोस्ट Google में rank करने लगता है और इसके साथ ही User Interface भी अच्छा हो जाता है। आप इसे आसानी से अपने ब्लॉग में edit कर सकते हैं। 

How to Add Table of Contents in Blogger

दोस्तों इसको करने से आपका ब्लॉग Google पर easily rank हो जायेगा। इसका सबसे बड़ा कारण ये है कि इसे लगाने से Bounce Rate कम होता है। क्योंकि जब भी कोई आपकी ब्लॉग post को ओपन करेगा उसे starting में ही table of content दिख जायेगा तो उसे पता चल जायेगा कि आपकी इस post में क्या-क्या है और उसे जो भी चीज पढ़नी होगी उस पर क्लिक करके वो सीधा अपनी पसंद का section पढ़ सकता है। 

इसके अलावा इसको लगाने से ON Page SEO भी improve होती है और इस वजह से blog post rank होने के chances भी बढ़ जाते हैं। 

                                   Table Of Content Code

 

It seems that there are a lot of requests for a TOC in the forum, actually there is no gadget or automatic way to do that, instead you have to do some little coding inside your post HTML.

Here is a complete guide on how to code a table of content for your posts/

Let's say that you have a post made with three parts of content, each content has a title, like this:

Title1:

Content 1 here

Title2:

Content 2 here

Title3:

Content 3 here

Switch to the HTML view and look for the title tags, you will find it in <h2> or <h3> tag, like this:

<h3> Title1 </h3>

Add an ID to it like this:

<h3 id="anchor1"> Title1 </h3>

And do the same for the other title, of course change anchor1 to anchor2 and so on.

Now let's create the table of content, stay in the HTML view and add the following code at the top of the post:

<div style="border: 1px solid gray; background: lightgray; padding: 10px; margin: 10px">

  <h2 style="text-align: center;">Table of content</h2>

  <a href="#anchor1"><h3>- Title1</h3></a>

  <a href="#anchor2"><h3>- Title2</h3></a>

  <a href="#anchor3"><h3>- Title3</h3></a>

</div> 

You can style the table the way you want.

If you click on any element inside the table it will jump to the content emplacement in the page, to make this jump scroll smoothly add the CSS code to your theme:

*{

scroll-behavior: smooth !important;

}