How to Add Table of Contents on Blogger Post

Blogging is becoming very Competitive Nowadays. So uniqueness is too important and also should follow all SEO rules. Google recently Shows Search Snippet to there every Search results. If your Website wants to show search snippet in Google Search form, Then you Should to add Table of Contents on the blogger site.

Good News for WordPress user, They easily add Table of Contents to there Every Post, but If you are using on Bloggers, we face some difficulties. So guys This article How to add Table of Contents on blogger site.

We are discussing Two methods Firstly We will teach you.

Table of Contents on WordPress Site

Open on Your WordPress Dashboard >> Then Drag your mouse on Plugins Section and Click on Add new

Then Open The Plugin Section and Search on Easy Table of Contents and Install now and activate

Congratulations! you have Successfully added Table of Contents to Your WordPress Website. You can custom setting to these plugins according to your requirements.

Read more of Blogger Site Development

Table of Contents on Blogger Site

If you want to add a Table of Contents to your Blogger Site, You Need Some Coding. First of all, Add This Code to Your Blogger Themes.

STEP 1

Open on Blogger Dashboard >> Then Click on Themes and Click on Edit HTML >> Paste These CSS codes before the </head> tags Section and Save now.

CSS CODE

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

STEP 2

Then Paste the JAVASCRIPT code before the </body> section and Save now Your blogger themes.

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>

Now Successfully saved HTML and CSS code to your Blogger site but If you Want to Show table of Contents, YOu need to Paste HTML Shortcode to your Every Post. This is a Sort Disadvantage on Blogger.

STEP 3

HTML SHORTCODE

<article>

<div class="all-questions">

</div>

</article>

Write an SEO friendly Post after the Publish your Post, Open your blogger Post on HTML Format.

Open Your Blogger Dashboard and Click on POST section and Write Your Post >> Then open your post on HTML Section and Paste <article> and </article> under your article section.

STEP 4

Where You Want to Shown your Table to Your blog post. Paste this Shortcode

<div class="all-questions">

Paste to your every post on first <h2> para. If you want to functional Your links on Table of contents Jump links. Then Paste this Shortcode to your <h2>, <h3> tags.

Like <h2 id=”one”> Next H2 tags <h2 id=”two”>

Read more of Blogger Site Development

Final Word

That’s it. Now You have successfully add Table of Contents on Blogger Post. If you’re facing any error Comments in This Post.

Especially Double Thanks for Spending your valuable time. Your feedback to our inspiration.