How to Add Table of Contents in Blogger Post [2019]

How to add Tables of Contents in Blogger Post 2019
How to add Tables of Contents in Blogger Post 2019

Today we will discuss how to add a table of contents (TOC) in blogger Post.

Blogger is a big platform where you can create a free website with a free domain.

Google own product is Blogger.

If you want to make money online without any investment then use blogger platform.

Contents Of Post:
***************
Benefits of Blogger
Important Tips & Tricks
Benefits of TOC
Add TOC in Blogger Post



Benefits of Blogger Platform:

Make your own website

Easily Customize

Earn money using Google Adsense

Share your knowledge

Top Bloggers who earn money from money without any investment: Read Here

Important Tips & Tricks:

If you are new in this field then blogger tips & tricks from online.

In Google, You can find many tutorials where can learn about the blogger.

Youtube is a video platform where you can learn about blogger and Earn money ONLINE.

Once you learn everything about the blogger, can start to earn money through Blogger and Youtube?

Use Affiliate marketing on your website & earn money.

Many bloggers who earn 1 Lac per month through Google Adsense & Affiliate marketing

So, now we will discuss How to add Table of Contents in blogger post...
Relative Post: 6 SEO Advanced Strategies 2019

Benefits of TOC:

  1. TOC is good for every Blogger.
  2. Increase visibility
  3. Improve your Website traffic
  4. Visitor easily navigate to your post
  5. Reduce Bounce rate
  6. Show lists in Google search
EX – Search "Benefits of Blogger" On google.

How to add Tables of Contents in Blogger Post 2019
Tables of Contents



How to Add Table of Contents in Blogger Post:

Follow these methods and add Table of contents in blogger post. Let’s Start
1st - Log in Your Blogger A/c. Click Theme. Click Edit HTML


How To add Table of Contents in Blogger Post 2019
How To add Table of Contents in Blogger Post 2019

2nd - Press CTRL+F & Search </body>. tag and paste the below code just above the </body> tag and click on Save in order to save your settings.


How to Add Table of Contents in Blogger Post 2019
How to Add Table of Contents in Blogger Post 2019
Paste Below 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>  
3rd - After adding the script, create a new post and switch to HTML view. 

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

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


How To add Tables of contents in Blogger Post 2019
How To add Tables of contents in Blogger Post 2019

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


How to add Table of Contents in Blogger Post 2019
How to add Table of Contents in Blogger Post 2019

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


How to add Table of Contents in blogger Post 2019
How to add Table of Contents in blogger Post 2019
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.

Copy & Paste Below Code
***********************
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; } }


Previous Post
Next Post

post written by:

6 comments:

  1. Thankyou for this blog its really interesting and informative, but there is some errors
    Which need to be recorrect by owner. See i also have some good blogs related to
    Technical services, you can check on my website.

    Avast Login
    garmin.com/express
    avg.com/retail
    bullguard support number

    ReplyDelete
  2. Thanks for the information... Digital marketing leads to bring the respective customer for your business and make your business popular among the people.
    Best digital marketing company in chennai, SEO company in chennai, digital Marketing Agency in Chennai

    ReplyDelete
  3. Thank you for sharing your thoughts and knowledge on this topic. This is really helpful and informative, as this gave me more insight to create more ideas and solutions for my plan. I would love to see more updates from you.

    Melbourne SEO Services

    ReplyDelete
  4. I enjoyed reading your article. Please make more interesting topics like this on.
    I'll come back for more :)

    From Japs a researcher from https://alwaysopencommerce.com/

    ReplyDelete