Hi everyone, welcome to Key2Blogging and in this video I will show you how you can add
an automatic table of content to your blogger website. So about a year ago I made a video on how to add table of content manually
Here you don't need to add any script to generate the table of content, but most of you demand
that how to add an automatic table of content to our blogger website
So let's check how you can do that. So first of all, I will add an automatic table of content like this
So when I click on the show all button, it will add the table of content like this and
you can easily jump to the section by clicking on this button
And here you don't need to add anything, it will generate the table of content automatically
So for this we need to go to our blogger dashboard and here we need to click on theme
Now here I will click on edit HTML, but before that take a backup of your theme and then
proceed to the next step. So let's click on edit HTML. Now I need to scroll down all the way to the bottom of my theme code and I will search
for closing body tag and I will paste a code just above the closing body tag
So I will just select the code from here and I will paste it just above the closing body
tag and this code will only load in the post page. So you don't need to worry much about your page speed and this is very lightweight script
So it will not hamper the page speed that much. So let me just save the code first
Now let's go back and I will let's click on post here and I will go to the search engine marketing
So I have already removed the table of content for this blog post
So to generate the table of content in this blog post, we need to add a small code in
the post section. So just copy this code and you need to paste the code in every blog post where you want
to add the table of content. So suppose I want to add the table of content just below the image or just below the fast heading
So what I can do is just go to the post editor and I will switch to the HTML view and then
I need to find where I want to add the table of content
So this is the image code. So I need to add the table of content just below the image
So I will add the code like this. Now it will automatically generate the table of content based on the headings present in
this blog post. So let me just refresh this page. Okay, now scroll down and here as you can see the table of content is added to our blog post
So when I click on show all it will show the table of content and I can easily jump to
the section by clicking on this table of content. So here one thing to note that if the table of content is not working, then you need to
change your post ID. So let me just show you how to get the post ID of the blog section
So I will just right click on it and I will click on inspect element
And here as you can see, this is the post ID post dash body
So in different themes, the post ID is different. So let me just open a different blog post here
So let me just open a different website. And this is the Fluttero Pro theme
So let's open a blog post here. And let me just inspect the page
And here as you can see, the post body ID is post capital body
So in case of Fluttero Pro or Median UI theme, the ID is post capital body
But in case of templatify themes, the post ID is post dash small body
So we need to change the post ID in this script so that it will only detect the heading in
the post body. So let me just scroll down. And as you can see the post body content, the element to the end of the blog post
So we need to change the post body ID in this script
So for this go to the theme and let's click on edit HTML
Now scroll down all the way to the bottom and search for query selector post body has
post body. So in case of Fluttero Pro, you have to use post capital body
And in case of templatify themes, you have to use post dash body
So make sure to change the ID according to your themes so that it will detect the headings
inside the blog post and it will not detect headings like related post section and popular
post like that. So it will only detect the heading within the blog post
I hope you got the idea how to generate an automatic table of content to your blogger website
And you can also further customize the table of contents. So let me just click on inspect here
And here I will select the whole table of content. And then I can change the background color of the table of contents
Let's change the background color to like I will delete it and I can add a different
type of background color here. As you can see, you can choose any of the background color you want
So let's add the background color here and you can also change the font color
So let's change the font color from here. Like this. So blog is looking good here
And you can also add a border in the table of content
Like 2px solid. So in this way, you can further customize your table of content according to the look
and feel of your website. So I hope you got the idea how to add table of content
And if you have any doubt regarding this, then you can ask me in the comment section
And if you don't want to add any script and generate the table of content manually, then
you can check the link in the description. And if you found this video helpful, then make sure to hit the like button and do subscribe
key to blogging. Thank you