If you are a blogger you must know the valuse of TABLE OF CONTENTS 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 TABLE OF CONTENTS in Blogger

TWO_BLOGGER_GIRLS_LEARNING_TABLE _OF CONTENTS
How to Add Automatic Table 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 TABLE OF CONTENT 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

Step 2 : Click on the Theme

After entering in to your blogger just click on the theme section below as hown in the images

Step 3 : After that Click on Edit HTML

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

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

Step 5 : 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 : 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 : Now just Copy the HTML CODE as per instructions below 


( NOTE : HTML CODE  SHOULD BE POSTED IN EVERY INDIVIDUAL POSTS TO CREATE TABLE OF CONTENTS 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)



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)



You are Half way done now follow the last step

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

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

You have no completely create a TABLE OF CONTENT 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 dont forget to subscribe the blog and share this post to as many as you can

Leave a Reply

Your email address will not be published. Required fields are marked *