How To Add Table Of Contents On Blogger

You might have probably visited Wikipedia at one or the other and must have seen Table of Contents menu at the right or left a corner of the article and might have definitely used.

So, Table of Contents or TOC is just simple contents, which are lists and are usually found on a post or page at the beginning of an article.

It usually includes the heading of your post headers and may also include a second level or section titles.

Benefits of adding Table of Contents on your posts

Tables of contents allow you to write long articles and your visitors can easily navigate to the particular point or header.

It can reduce your high bounce rates by keeping your readers engage.

As it displays jump to section link, web crawlers can easily crawl your contents and thus improves search engine ranking.

How to add Table of Contents in blogger posts?

Here are best two methods that you can use to create Table of Contents for your blogger posts. Just follow the simple steps below and you will be done within no time.

1^st Method

Step 1. Login to your Blogger and select Template/Theme and click on Edit HTML.

Step 2. Pressing Control + F search for the </body> tag and paste the below code just above the </body> tag and click on Save in order to save your settings.

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

After adding the script, create a new post and switch to HTML view.

Step 3. Now below the line of code <div dir="ltr" style="text-align: left;" trbidi="on"> type the <article> tag.

Step 4. Paste this <div class="all-questions"> code in the section of your post where you want to display your table.

Step 5. Now, at the end of your post just after the last /div tag, close the first two tags by adding this and this codes.

Step 6. In each header tag in your post, add ID_”ID-Number”.

Whereas the ID number for example:

<h2 ID="One"> How to add Table of Contents in blogger posts? </h2>

Now, update or preview your post in order to note the changes you made.

You can also, customize your Table of Contents with customized beautiful and alignment by just adding the below CSS code by pasting the below code just above the ]]></b:skin> tag.

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

Note: You have to keep in mind that adding this customization will depend on the structure of the and responsiveness of your mobile template. So, if it doesn’t fit well with your mobile view, then I suggest not to add the customization.

2^nd Method

Now, this second method enables you to create a Table of Contents widget for a single post for your blog and it is more a much manual process you have to follow. So follow the steps carefully.

Create a new post and switch to HTML view

Step 1. From the below two codes, you need to just copy one depending on your choice and paste the code where you want your Table of Contents widget to be shown.

The 1st Script

<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#ID3.1"><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>

The 2nd Script

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

Note: Before clicking on the Publish button, you have to make some changes:

Change all the blue color text/URL that is marked with red color with your own text/URL.

You have to change for all of your posts heading, including the ID using the Span tag.

Say for example

If one of your headings is:

<h2>How to add Table of Contents in blogger posts?</h2>

Then, you can modify it to:

<h2> <span id="ID1"> How to add Table of Contents in blogger posts? </span> </h2>

You have to use different ID numbers for each of your headings, like ID1, ID2, ID3, etc.

Now, you have to modify the ID numbers in the code so to match the ID number you input as your headings.

You have to also modify the code by changing the text URL within the hyperlink tag to the post URL.

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 with your own 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 the below tag.

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

Using these methods you can easily add Table of Contents on your blog posts and will provide better navigation for your readers.

If you have encountered any problems while adding the codes, you can leave a comment below and we will be happy to guide you through it.