.PNG)
It is possible to add a table of content in Blogger automatically and manually. In this post, we will learn how to add the table of content in Blogger. using javascript.
Hello Bloggers, in this post I will show you how to add a table of contents to a Blogger or Blogspot post.
I hope you are aware that, unlike WordPress, Google Blogger or Blogspot does not allow plugins. However, with the aid of this post, you can quickly make a lightweight Table of Contents for your blog post. So, in this post, I'll show you how to install TOC for your blog posts and pages step by step.
What exactly is a Table of Contents?
A Table of Contents, or TOC, is a tiny piece of text in a tabular style that appears before the opening section of a post or article. It creates a table with all of your posts' or articles' headings and subheadings.
What exactly is an Automatic Table of Contents?
Automatic Table of Contents allows us to automatically organize all of the headings and subheadings tags from your blog post without manually describing the header tags, resulting in a lovely table for your audience to peruse.
What are the benefits of using the Table of Contents?
As you are aware, the TOC shows directly above the beginning of your postings, just after the first paragraph. Your target audience can just take up a few paragraphs on the first page of your whole content.
As a result, a well-planned Table of Contents might be detrimental in:
- Give your post or article a professional appearance.
- Arrange the points of your post or essay in a logical order.
- Managing your audience's expectations, since it gives a high-level overview of your posts or articles.
- Give your visitors a road plan so they can quickly traverse your whole topic or article.
Can TOC Enhance the User Experience?
User experience is an important aspect of a blog post or article that many bloggers nowadays overlook.
According to the study, user experience is the key to achieving a higher position in SERP. The table of Content will also assist to improve the user experience of your blog.
According to a study, more than 80% of overall web users just skim the main aspects of a blog post or article. TOC should be used only when the article or post is sufficiently long and includes more than three headings.
Is the Table of Contents beneficial to SEO?
Of course, a table of contents may also help with SEO. Consider the following reasons: -
- When you write a long post or article and include a table of contents, your material is separated into sub-sections, each of which covers a different facet of the same issue.
- So, if you have a longer blog post or article, your blog is more likely to rank higher in search engines. Did you know that Google uses the length of your posts as a ranking factor?
- It also enhances your website's Click-Through-Rate (CTR) since Google provides a 'Jump to Section link' scraped from the Table of Contents of your blog post or article and presents the most relevant result to viewers.
This TOC Plugin's Advantages
- JavaScript and CSS are used to create this plugin.
- It is constructed in such a manner that it will not load until your full webpage has been loaded.
- It's little and won't slow down your website load time.
- This SEO-friendly plugin will help your page rank higher in search engines.
- This plugin includes a toggle button for hiding and unhiding the TOC.
- It's incredibly adaptable and responsive.
- The nice thing is that this plugin only runs when called. To put it another way, you may activate or disable TOC on a given page or post.
Advice - Before altering or making changes to your template, it is strongly advised that you backup your existing template so that if something goes wrong, you can restore your original template.
To add a TOC in Blogger, follow the instructions below:
How do to create a table of contents in Blogger?
1. Sign in to your Blogger account.
2. Click on "Template or Theme" and tick on "Three Dots" then click on "EDIT HTML".
3. Now search for the </head> and paste the below script just above the </head> tag.
Dont worry! All the codes are given below in one File
4. Now search ]]></b:skin> and paste the following CSS code just above ]]></b:skin> line.
5. At last search for the <data:post.body/> , there can be more than 1 <data:post.body/> tag , Replace all of them with the below code.
6. The coding part ends here. Click on "SAVE" and you are all done!
How can I include a table of contents in a blog post?
To enable TOC in your blog post or article, switch to "HTML" mode while composing a new post and then insert the following code right after the first paragraph or before your first heading tag.
Including a table of contents (TOC) in a blog post
To enable the TOC plugin, add the Javascript code below after the end of your article.
Press the Publish button, and there you have it! TOC has been successfully created.
Conclusion
I've tried to keep these instructions as simple as possible, and I've also minified all of the scripts so they don't slow down your blog's page performance.
I hope you found this tutorial on how to create a table of contents in Blogger useful. If you discover any errors or problems, please leave a remark and I will assist you in resolving them.
Send comment