• Breaking News

    How to Generate Automatic Table of Contents in Google Blogger - Hindi

    Automatic Table of Contents in Google Blogger

    Namaskar Dosto, Main aaj firse aapke liye ek naya topic leke aaya hu. Jo ki bahut hi important topic hai. Agar aap Google Blogger use karte hai to fir ye article aapke liye hi hai. Dosto Google Blogger me post me "Table of Contents" add karna bahut hi muskil kaam hota hai. Ishi muskil kaam ko main easy karne ke liye hi yah article ko post kiya hai. Ish post me maine puri detail me bataya hai. 

    Step to Add Table of Contents in Google Blogger

    Table of Contents in Google Blogger

    Google Blogger me table of contents ko add karna thoda muskil kaam hai, par yahi kaam WordPress me bahut hi easy tarike se kiya ja sakta hai. WordPress me aap table of contents ko plugins ki helps se turant kar sakte hai par Google Blogger me aapko thoda coding karna padega. Maine aapke liye niche pura details bahut hi easy tarike se samjhaya hai.

    Step to Add Table of Contents in Google Blogger

    Apne Blog me table of contents add karne ke liye niche diye gaye steps ko follow kare,
    1. Google Blogger me login me karke dashboard pe jaye.
    2. Theme option ko open kariye.
    3. Eske baad edit HTML pe click kare.
    4. HTML editor open hone ke baad, aapko 'Ctrl+F'  press karke '</head>' search karna hai.
    5. Ishke baad aapko niche se CSS code copy karke '</head>' ke pahle paste karna hai. (like :- CSS Code </head>)
    6. Ab aapko firse 'Ctrl+F'  press karke '</body>' search karna hai.
    7. Ishke baad aapko niche se JavaScript code copy karke '</body>' ke pahle paste karna hai. (like :- JavaScript Code </body>)
    8. Dono code paste karne ke baad HTML ko SAVE kar lena hai.
    9. Uske baad jis post me aapko table of contents add karna hai uss post me niche se HTML Code copy karke paste karna hai.
    10. HTML code vahi paste kare jaha apko Table show karna hai.
    11. Agar apko kuch bhi nai samjh aaya ho to niche comment kare.

    CSS

    
    <style>
    article {
      max-width: 50em;
      background: white;
      padding: 2em;
      margin: 1em auto;
    }
    .table-of-contents {
      float: right;
      width: 40%;
      background: #eee;
      font-size: 0.8em;
      padding: 1em 2em;
      margin: 0 0 0.5em 0.5em;
    }
    .table-of-contents ul {
      padding: 0;
    }
    .table-of-contents li {
      margin: 0 0 0.25em 0;
    }
    .table-of-contents a {
      text-decoration: none;
    }
    .table-of-contents a:hover,
    .table-of-contents a:active {
      text-decoration: underline;
    }
    
    h3:target {
      animation: highlight 1s ease;
    }
    
    @keyframes highlight {
      from { background: yellow; }
      to { background: white; }
    }
    </style>
    

    JavaScript

    
    <script type='text/javascript'>
    var ToC =
      "<nav class='table-of-contents' role='navigation'>" +
        "<h2>Table of Contents:</h2>" +
        "<ul>";
    
    var newLine, el, title, link;
    
    $("article h3").each(function() {
    
      el = $(this);
      title = el.text();
      link = "#" + el.attr("id");
    
      newLine =
        "<li>" +
          "<a href='" + link + "'>" +
            title +
          "</a>" +
        "</li>";
    
      ToC += newLine;
    
    });
    
    ToC +=
       "</ul>" +
      "</nav>";
    
    $(".all-questions").prepend(ToC);
    </script>
    

    HTML

    
    <article>
    
    <div class="all-questions">
    
    </div>
    
    </article>
    


    Upar diya hua code originally Codepen ka hai, Jo ki aap direct uski website se bhi copy karke use kar sakte hai. Vaise maine koi bhi modification nai kiya hai, to aap ishi code ko direct use kar sakte hai.

    Dosto main aasha karta hoon ki aapko yah article pasand aaya hoga. Ish article ko share kare comment bhi kare aur kisi bhi help ke liye aap mjhe massage bhi kar sakte hai.

    Also Read:-

    No comments