How To Add Table Of Contents In Blogger Post Easy Way

Hello Guys, welcome to My Tech 4 Support Blogger In Blogger today I will show you how to Add Table Of Contents In Blogger Post in Blogger blog with Text and pictures.

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.

1st Method

Step 1: First of all Go to your Login to your Blogger and select Template/Theme and click on Edit HTML.

Step 2: Now 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.

Copy The Code




Copy The Code

 <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: After that below the line of code <div dir="ltr" style="text-align: left;" trbidi="on">type the <article> tag.







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

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

<article> and </div>

Step 6: At the End 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.

2nd 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.

<a href="URL#ID1">

Like

<a href="https://www.wonderkrish.com/2018/09/add-table-of-contents-blogger-post.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 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.

       To Download My Blogger App From Google Play store.

                                      Click Here: Tech 4 Support

              I hope you enjoy this Post. If any problem comments it.

                           Daily Tech Update Check and Join Us :

                             Facebook | Twitter | Google+ | Tumblr | Instagram | YouTube