Home Blog How to Add Automatic Table of Contents In Blogger ?

How to Add Automatic Table of Contents In Blogger ?

Want to know “How to Add Automatic Table of Contents In Blogger ?” If you are a blogger you must know the values of TOC in Blogger , but very few of us know that it can not only created in Word Press but you can create it for Google provided Platform Blogger Also. So today i will make you understand how to create a wonderful and beautiful TABLES OF CONTENTS in Blogger

Why Table of Content is Necessary ?


Yes friends when we write a blog which uses more heading , subheadings and minor headings or you can say that H1,H2,H3 Tag , or you can say that if you are writing a blog which gives you step by step information of post or you want to classify your blog details it is very necessary. Also Google gives good rating to your posts if you used TABLESOFCONTENT in best way in your posts

 

Now Lets Learn How to Create a TABLE OF CONTENT step by step

Step 1 : Open the dashboard of Google Blogger

First of all you have to login to your blogger in google and go to the dashboard and you will see this page like this
Table of Contents Tutorial- Add Automatic Table of Contents In Blogger
Table of Contents Tutorial- Add Automatic Table of Contents In Blogger

Step 2 : Click on the Theme – Table Of Contents

After entering in to your blogger just click on the theme section below as hown in the images
Table of Contents Tutorial- Add Automatic Table of Contents In Blogger
Table of Contents Tutorial- Add Automatic Table  In Blogger
 
 

Step 3 : Furthermore, Click on Edit HTML

Now just see the image below and click on the html portion with an arrow
 

Step 4 : Moreover, use Click  CTRL + F inside blog posts and search /head 

 
 

Step 5 : Also,Copy the CSS code and Paste it 

When you find the /head tag just paste the CSS CODE given below on top of head tag and save it , you cant copy this code from here so i have given an HTML CODE BOX below copy from there 

 CSS CODE BELOW

<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 6 : Furthermore, Copy the Java script code and paste it

Again press CTRL + F inside Blogger theme and search for /body tag and just paste the JAVASCRIPT CODE given again on the top of  /body tag and save but  you cant copy this code from here so i have given an HTML CODE BOX below copy from there
 
Image 1 

Image 2

JAVASCRIPT CODE BELOW

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

Step 7 : Moreover, just Copy the HTML CODE as per instructions below 


( NOTE : HTML CODE  SHOULD BE POSTED IN EVERY INDIVIDUAL POSTS TO CREATE TOC  INSIDE THAT PARTICULAR POSTS FOR EVERY NEW POSTS YOU CREATE  UNLIKE BLOGGER THEME WHICH IS A ONE TIME PROCESS )

HTML CODE BELOW
<article> <div class=“all-questions”> </div> </article>


Step 8 : This Must be copies in Blog posts 

 

Copy <article> in your Blog posts at the top (please look at the highlighted part)
Table of Contents Tutorial- Add Automatic Table of Contents In Blogger
Table of Contents Tutorial- Add Automatic Table In Blogger


Copy </article> in your Blog posts at the end of the blog(please look at the highlighted part)

 



Copy <div class=“all-questions”> in your Blog posts at the top of H3 tag (please look at the highlighted part)

 



Copy </div> at the end of the blog posts (please look at the highlighted part)
Table of Contents Tutorial- Add Automatic Table of Contents In Blogger
Table of Contents Tutorial- Add Automatic Table  In Blogger

 

 

Moreoever, You are Half way done now follow the last step

Step 9 : Just give ID numbers to every H3 tags as follows 

Table of Contents Tutorial- Add Automatic Table of Contents In Blogger
Table of Contents Tutorial- Add Automatic Table  In Blogger

id= “one” id=”two” like this  e.g inside <h3 id=”one”> 

You have no completely create it inside a Blogger Posts

For All Codes Download or Copy from here


Please refer this blog as how Table of Contents looks like : Here

So friends this is how you can create TABLE of CONTENTS in Blogger easily , if you like the post and find it helpful please do follow us and don’t forget to subscribe the blog and share this post to as many as you can