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
Step 2 : Click on the Theme – Table Of Contents
Step 3 : Furthermore, Click on Edit HTML
Step 4 : Moreover, use Click CTRL + F inside blog posts and search /head
Step 5 : Also,Copy the CSS code and Paste it
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
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 <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)
Moreoever, 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 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