How to create a table of contents in blogger post

How to create a table of contents in blogger post

How to create a table of contents in blogger post. Welcome to all today we will be teaching you to create an automated table of contents for your every post in details. Here we talk in detail about how we can create an automated table of contents inside any blogger website post.

How to create a perfect table of contents in blogger post

If you are using Wordpress then you can easily get a WordPress plugin to show table contents of every post.

But, inside blogger post, there is no availability of any plugins so we need to manually do coding for creating a table of contents in every post in HTML section. We know that to rank the post in the google platform we really need to create or generate a table of contents.

What are the top 6 Advantages of Adding Table of Contents in blogger?

1) The first, advantage after adding TOC is that your blog looks professional to visitors.

2) The second, With the assistance of Table of Content, your blog gets a knowledgeable look.

3) The third, Improves search engine optimization of the Table of the Content blog. Which makes your blog rank quickly within the program.

4) The fourth, Visitors to the blog Get all the knowledge about the blog from your TOC. And they can navigate your blog easily.

5) The fifth, Readers get an honest blog experience after adding Table of Contents insider their blog. With its help, Visitor stays on your blog for a long time. This also helps in reducing the bounce rate of your blog.

6) Google also shows jump links to the table of content posts within the pages of its search result in an order that any visitor will click there on the link to succeed in that specific section of the blog directly.

Methods to create Table of Contents

1. Automated TOC: no need to do more coding inside the post

2.Custom-Made: you need to perform manual many coding inside every post

Create a table of contents in every blogger post with simple steps

You easily learn to create a table of contents to your every post if you follow all the steps sincerely according to us.
1. Visit www.blogger.com
2. Choose your blogger/website situated left side of your screen.
3. Go to your blogger theme section
4. Click on edit theme
5. Click to the new window filled with codes
6. Start your work by finding </head> with the help of ctrl+f  and follow the below steps.

Click Here: EDV 2024 Registration Open

 

#1 CSS codes for table of content:

Copy below code and paste below CSS code just above </head>

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

#2 Javascript codes for table of content

Now, copy below code and just paste javascript code just above </body>. Press ctrl+f  then type </body> to find it.

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

#3 HTML Codes for table of content

Copy Below shown HTML codes and paste in every post as per instructions below note.

<article>

<div class="all-questions">

</div>

</article>

Note:

1. Top of article Put  <article> at the top of your post. 
2. Put  <div class="all-questions"> in the place where you want to show table of contents
3. Put </article> at the bottom of your article/post. 
4. Paste </div> above </article>

#4 Under H2 and H3 Tags

Click on Html section of the post

find <h2>
Type <h2 id="one">
if you have more than one h2 then you have to increase in ascending order with two, three, four, etc.

2, 3, 4 and continue...

 

After above follow in ascending order as id="five"

find <h3>
Type or edit with <h3 id="five"> 

Similarly,

find <h4> 
Type or edit with <h4 id="six">

Final Words

Follow all the steps serially in series order or ascending order then you are done 100%. If you like to get in connection with us in the future for such exciting contents then subscribe to us to get the latest updates.

Thank you

VISIT BKG LATEST NEWS Again

😃😃😃Keep Sharing and Keep Caring Yourself😃😃😃