Table of Content in the blog's post or page






generate table of contents

Giving a chapter by chapter list helps review and focus on content when composing lengthier articles. In any case, only one out of every odd stage makes it simple to add one. How might we carry out one when we need top-notch tooling?

How to Create an easy table of contents with two lines of codes? 

When you are going to composing lengthier posts or articles. The users get bore reading complete articles or posts. Or a user wants to go on a certain page, Then you must insert the table of contents on your page or post. You don't know to code even, don't worry, I will explain to you to make a table of contents in an easy way. Just follow me up. 

Let's create a new post and Edit it. And create a table of content and details of the post here is a demo example. 


contents page



Now click on HTML view, Follow the red circle, Click on this icon.



HTML view in blogger


Now click on HTML view

click on html view in blogger






And After click on HTML view, and I make this code view easier by pressing the Enter key. Now illustrate the following screenshot, it is differentiating between composing and HTML content. 

different between html view and composing view in blogger

This is the table of content,
This is the Table of content,

These two lines are our main focus to make them clickable and go on the target link below. Now we need two lines of code to add our table of content.

Like this 

<a href="#tableofcontent1" style="color: blue;"> This is the table of content </a>
<a href="#tableofcontent2" style="color: blue;"> This is the table of content </a>

Deep look at the following screenshot.

table of content in blogger without  code

Now the last line of code: <div id="tableofcontent1">  </div>


table of content in blogger



<div id=" id should be same ">  id can't be changed, if you put id name in above code, you can use the same id name. You can't change it. and at the last the closing tag of div. </div>
that's it. 

To view this result, publish the post and view your blog and check your table of content.


I tried my best to explain the table of content with every single step and line of code. I thought you have zero knowledge about the codes. Whatever if you have any questions regarding this post, I will be very happy to help you. And I can make the table of content free for you. Just let me know in the comment box below. THANKS, And cheers. 😊😊






Post a Comment

1 Comments