How to Add Automatic Table of Contents in Blogger | Some Easy Steps

Extra Sahayeta October 20, 2018

How to Add Automatic Table of Contents in Blogger- In this article I am going to give you the solution that How will you add Tables of Content In the Blogger? It was very difficult to add this because in Blogger there is no plug in was given to do, we all have to do it manually. But if you use Wordpress then there is so many plug in are given to do and make you work easier.

How to Add Automatic Table of Contents in Blogger | Some Easy Steps,easy steps
How to Add Automatic Table of Contents in Blogger | Some Easy Steps

Adding Table of Contents in Google Blogger.


It was very difficult to Add Table of Contents in Google Blogger, because in this you have to use a little bit of coding. To use coding you have to learn it first. But when we use Wordpress it becomes very easy to Add Table of Contents in it, because we got many of the plugins in it that make our work too easier to do it.

Steps to Add Table of Contents in Google Blogger.


  1. Open the Dashboard of your blog.
  2. Click on the Theme Option. Which was given in it.
  3. Then just click on the Edit HTML option, given below of your theme. A new window will appears on your screen.
  4. After it open just press the Ctrl=F key from you keyboard, a Search tab will appear on the top right of your blog.
  5. Search /head in your blog by using the search bar. And just before paste the CSS code in it.
  6. Then again Open the search bar and find /body in it.
  7. After rhat, copy the javascript code and paste it just before of the /body.
  8. The Final Step, create a new post where you have to paste the HTML code which is viven below in this article in HTML section of your post.

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>

Conclusion....
So friends, finally this article is aver and i hope that you like this video. If you like this please share this with all you friend . So they also get aware of this.

Also read this:-

Tags: