How to add a table of contents to a blogger post

Hello friends, in this post I will tell you about the Table of Content. Friends, if you do not know the Table of Content, then by reading this post, you will know everything. Friends, if you are a Google Blogger If you use this post, it will be very useful for you. In Blogger, your table of content is very difficult to add. We do not understand how to add it to our Blogger. Friends in WordPress. If you want to add a table of content, we can add it very easily, but it is a bit more difficult in Blogger than WordPress. However, we still have to add, friends, first you have to open your Blogger dashboard After that you have to click on the theme option

then you have to click on Edit HTML.

After editing HTML, you can simply click in the box where the coding is showing and then you press the Control + F button on your keyboard.

After that a search bar will open in which you have to type this.

</head>Once it has been searched, you have to paste this code over it.

CSS code

<style>
article {
  max-width: 50em;
  background: white;
  padding: 2em;
  margin: 1em auto;
}
.table-of-contents {
  float: top;
  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>

After pasting you have to click on Dosto Save Theme then you have to click on Ctrl + F button then you have to paste this code in this search bar.</body>

After searching, you have to paste the code with javascript on it.

JavaScript code

<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>

Then you save the theme. Now your work is almost 70% done. Now you have to come to the post step. If you have written the post before, then it is fine. You have to paste it very carefully.

HTML code

<article>

<div class="all-questions">

</div>

</article>

Keep in mind that first you have to paste the CSS code, then the JavaScript code, then you have to paste it in the theme, then you have to paste the HTML code in the post.

This is how you write a post. First you have to give the title, then you have to put a heading. All you have to do is select H1 or H2 or H3 from the post section of your post above. If you like it, select it.

Then when you have to add this code to the post, open the post in HTML mode.