How to Add Automattic Table of Contents in Google Blogger in हिन्दी

Subscribe our YouTube Channel

How to Generate Automattic Table of Contents in Google Blogger | Hello Dosto mai Bharat aapka bahut bahut swagat karta hu aajke yah fresh or bahut useful article mai, ji ha agar aap use karte ho google blogger ka to eske andar Table of Content add karna bahut hi musik hai, agar wordpress hota hum plugin ki help se karlete but blogger me aapko manuly add karna padega, to aajke article mai hum es topic ke bare me details me sikhenge.

Note: Agar aapko video dekh kar sikhna pasand hai to upar ek video hai, esme maine details or setp by step sikhaya hai, ki aap kis tarah se Table of content google ke blogger me add kar sakte ho.

Table of Contents in Google Blogger

Google blogger me table of content add karna thoda muskil hai, agar wordpress me add karna hai to bahut simple hai, wordpress me kya hai simple plugin ka use karke aap add kar sakte ho, or blogger me pahle aapko kuch code add karna padega, to maine aapko nice code diya hai, eska aapko use karna hai.

Yah code ,originaly codepen hai, agar aapko real code dekhna hai to aap es link pe click karke dekh sakte hai, maine es code me kuch midification kiya bai code same hai ok.

Step to Add Table of Contents in Google Blogger

Blogger ka dashboard open kijiye.
Theme pe click kijiye
Eske bad Edit HTML Pe click kijiye.
HTML Editor open hone ke bad aap keyboard mese Ctrl + F Dabaye or /head search kijiye
Bad me aapke samne /head hoga eske bilkul upar nice ka CSS Wala code paste kar dijiye.
Fir se Keyborad mese Ctrl + F Dabaye or esbar /body find kijiye.
Bad me Javascript ka code bilkul /body ke upar paste kar dijiye.
Final step, nice HTML ka code hoga esko aapko single post me paste karna hai.
Agar samaj nahi aaya to upar ek video hai dekh lijiye.

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>

# Final Word

To dosto mai finaly aasha rakhta hu ki aapko yah article pasand aaya hoga, agar aaya to der kis bat ki share kardijiye taki aapke friend bhi kuch naya sikhe.

Agar aapko yah article pasand aaya to share jarur kijiyega sabhi social media me, or ha ek request hai hamare youtube channel ko jarur Subscribe karna ,aap hume sabhi social media pe bhi follow karlijiye jaise ki, Facebook, Twitter, Instagram, YouTube.