How to Add Table of Contents in Blogger Post

Here's how to add Table of Contents and jump to a section in a blogger post.

This feature can easily be implemented on WordPress blogs and now, Blogspot/blogger blogs can have the same.

To begin,


What is Table of Contents?


A Table of Contents (ToC) is a table showing the basic headings or subheadings in a post or article.


What are the Benefits of a Table of Contents?


If you've visited Wikipedia at one time or the other, you must have seen a table of contents menu at one corner, and you have definitely used it to easily skimp through a post, or jump immediately to the section you're looking for.

Whichever is the case, a Table of Contents optimizes visitors time on a site by providing a map of the page.

That is, instead of going through individual sections of a post especially if it's a lengthy one, they can navigate to the section they are most interested in.

Although it is just as useful to go through a post from the first paragraph to its last, some visitors to your site who aren't very patient may leave immediately if they think you're deviating from the topic at hand or beating around the bush.

Trust me, they don't mind wasting another time finding the same information on another site than going through a lengthy page.

In a study by Jakob Neilsen of useit.com,

Although visitors spend more time on pages with more words, they only spend 4.4 seconds more for each additional 100 words.

 And also,

On the average, users only read half the content of a page with 111 words or less,

Generally,

It'll be both beneficial to you and your visitors when they spend less time finding the most relevant section to them in your posts.

Hence,

The need for a Table of Contents on your blog cannot be overemphasized.


Can Table of Contents Improve A Site's SEO?


Yes, it can!

Here's one reason:

  • It allows you write longer articles which Google uses as a ranking factor.

This is because a post with a Table of Contents will most likely require that you divide your content into subsections with each talking about a different aspect of the same topic.

With a longer post, you get higher rankings in search engine result pages.

And another:

  • A Table of Contents widget in your blogger blog can reduce your blog's bounce rate.

This is because visitors while skimping through the post will not mistakenly scroll past the section that actually solves their problem.

Jumping past it means they didn't find what they came for and the location of the close button isn't that much of a secret.

Also in some search results,

  • Google displays a 'Jump to section link' crawled from the Table of Contents in a site's page in order to show the most relevant result to the user.

While this increases the click-through rate to a site, it can also help it achieve higher rankings

So you see the need to implement one on your blog?

Now:

To format your blogger post with a Table of Contents, follow the steps below.


Adding Table of Contents Widget to Blogger


Option 1:

How to Add Table of Contents in Blogger Post
  • Goto your blog's template
  • Click on 'Edit HTML'
  • Using CTRL+F key combinations, search for the tag </body>
  • Copy the code below and paste 'above' </body>


<script type='text/javascript'>
var ToC =
  "<nav role='navigation' class='table-of-contents'>" +
    "<h2>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>





  • Save your template.
  • Next, Goto the post editor of the post you want to create a table of contents for.
  • Click on 'HTML'
  • Below the line of code <div dir="ltr" style="text-align: left;" trbidi="on"> type the tag  

<article>

  • Place this code in the section of your post where you want the table to display

<div class="all-questions">

How to Add Table of Contents in Blogger Post

  • At the end of the post just after the last </div> tag, close the first two tags by adding

  </article> 

And,

</div>


  • In each header tag in your post, add ID="ID-Number"
For Instance:

<h2 ID="One"> What is Table of Contents </h2>




  • Update the post and preview it to note the changes made.

Optionally, you can customize the Table of Contents widget with colors and alignment by adding this CSS codes 'above' the tag ]]></b:skin> in your template.


body {
  background: #eee;
  padding: 20px;
}

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

Keep in mind that this customization also depends on the structure of your mobile template. If it doesn't fit in well with the mobile view of your blog, I suggest you make do with the widget without this added customization.



Option 2:

Unlike the Javascript above, this method uses HTML tags to create a Table of Contents widget for individual posts on your blog. It is more of a manual process than the former method and requires very little HTML knowledge to help you achieve this.


To begin,

  • Goto the post editor of the post you want to add this table to your template.
  • Click on 'HTML'
  • There are two codes provided below, and each gives a different layout. 
  • Copy only one of the codes below depending on your structure choice and paste where you want the widget to show.

CODE 1
How to Add Table of Contents in Blogger Post

<div class="td-post-content">
<div class="toc_white no_bullets" id="toc_container">
<div class="toc_title">
Contents</div>
<ul class="toc_list">
<li><a href="URL#ID1">1</span> This is Main heading</a>
<ul>
<li><a href="URL#ID1">1</span> This is heading 1</a></li>
<li><a href="URL#ID2"><span class="toc_number toc_depth_1">2</span> This is heading 2</a></li>
<li><a href="URL#ID3"><span class="toc_number toc_depth_2">3</span> This is heading 3</a>
<ul>
<li><a href="URL#ID31"><span class="toc_number toc_depth_2">3.1</span> This is heading 3.1</a></li>
</ul>
</li>
<li><a href="URL#ID4"><span class="toc_number toc_depth_2">4</span> This is heading 4</a></li>
</ul>
</li>
</ul>
</div>




CODE 2:



<div class="td-post-content">
<div class="toc_white no_bullets" id="toc_container">
<div class="toc_title">
Contents</div>
<ul class="toc_list">

<li><a href="URL#ID1">1</span> This is heading 1</a></li>
<li><a href="URL#ID2"><span class="toc_number toc_depth_1">2</span> This is heading 2</a></li>
<li><a href="URL#ID3"><span class="toc_number toc_depth_2">3</span> This is heading 3</a></li>
<li><a href="URL#ID4"><span class="toc_number toc_depth_2">4</span> This is heading 4</a></li>
</ul>

</div>
  • Before updating the post, there are some changes you have to make in the code and the post headings (all fields highlighted in white).

For all post headings, include an ID using the tag <span> </span>

For example:


  • If one of my subheadings is:
 <h2> Steps to Add Table of Contents to Blogger blogs </h2>


I'll modify it to,

<h2> <span id="ID1"> Steps to Add Table of Contents to Blogger blogs </span> </h2>


Note: Use unique ID numbers for each heading, for example, ID1, ID2, ID3 and so on.

  • Next, modify the ID numbers in the code to match your the ID number you just inputted in your headings.

  • Also, modify the code by changing the text URL within the hyperlink tag to the post URL.


<a href="URL#ID1">

For example

<a href="http://www.techlass.org/2017/10/how-to-add-table-of-contents-in-blogger.html#ID1">

Keep in mind that the ID number after the hash symbol must match the heading you included the number in.

Finally, make changes to the texts 'This is heading...' by replacing it your subheadings.

Your final code should be similar to the image shown below:









If you have more headings to add than those provided in the code, use the List tags <ul> <li>    </li> </ul> to add more headings.

For example, after a closing </li> tag add:

<li><a href="URL#IDnumber">1</span> This is  a heading</a></li> and modify accordingly.

Using the methods listed above, you can easily categorize posts on your blog into sections that give more ease in navigating through your site's content.

If you encountered problems while trying to use this code on your blog, then leave a comment and we'll guide you through it.



Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:


HTML Link Code:

BB (forum) link code:

Comments