Hello Everyone! Welcome Back to TechiFeed. I have written a new informative post for you to read. So, Keep reading to find out more!
Adding a table of contents to each post is essential for SEO purposes, but it also makes it easier for readers to navigate through your content.
This tutorial will show you how to create a simple table of contents using HTML code.
The table of contents is a great way to organize your blog posts. You can create a list of all your articles and add a link to each one. It will help visitors find the information they need quickly.
The table of contents is a great way to organize your blog posts. You can use it to highlight essential post sections, so your readers know where to start reading.
When you write long-form content of 2000 to 3000 words with several headings and subheadings, the user will need help comprehending the structure of the post.
Readers' attention spans are short; if they see a long-form article, they will bounce back and prefer a short-form piece with a specific solution.
Table Of Content in Blogger
The table of contents is a great way to organize your blog posts. You can create a list of all your articles and add a link to each one. It will help visitors find the information they need quickly.
Benefits of the table of contents
The table of contents is a great way to organize your blog posts. You can use it to highlight essential post sections, so your readers know where to start reading.
When you write long-form content of 2000 to 3000 words with several headings and subheadings, the user will need help comprehending the structure of the post.
Readers' attention spans are short; if they see a long-form article, they will bounce back and prefer a short-form piece with a specific solution.
However, if you provide a table of contents at the top of the blog post, people can skip to the part and acquire the information they want.
There are various SEO advantages to including a table of contents on your website. It aids search engine bots in understanding the article and displays rich snippets in search results.
Consequently, the user can quickly jump to a specific section of the blog article inside the search result.
Most of you have heard of the JavaScript-based automated table of content, which creates a table based on the heading tag.
However, because it is a JavaScript-based technique, it slows down the loading speed of web pages. It necessitates the use of many resources and increases the size of the webpage.
That is why I will show you another approach for adding a simple table of content without modifying the coding of your blogger theme.
You only need to modify some code within the post editor's HTML view. So, on the Blogger website, follow the step-by-step instructions to construct your table of content.
Step 1: Make a new post or edit an old one to include the TOC.
There are various SEO advantages to including a table of contents on your website. It aids search engine bots in understanding the article and displays rich snippets in search results.
Consequently, the user can quickly jump to a specific section of the blog article inside the search result.
How To Add A Simple Table Of Content To Your Blog Posts
Most of you have heard of the JavaScript-based automated table of content, which creates a table based on the heading tag.
However, because it is a JavaScript-based technique, it slows down the loading speed of web pages. It necessitates the use of many resources and increases the size of the webpage.
That is why I will show you another approach for adding a simple table of content without modifying the coding of your blogger theme.
You only need to modify some code within the post editor's HTML view. So, on the Blogger website, follow the step-by-step instructions to construct your table of content.
Step 1: Make a new post or edit an old one to include the TOC.
Step 2: Switch to HTML view and press CTRL+F to search for header tags such as h2, h2, etc.
Step 3: Now, on the heading tag, put Shortcodes like id=1 and id=2.
Step 4: Return to the Compose view, copy all headings, and paste them into plain text, as shown below.
Step 5: Now, choose the first heading text, click the link, write #1, and save it.
Step 6: Replace all plain headers with links like #2, #3, and so on, and save it.
In the Blogger Blog post, you have successfully generated an HTML table of content.
In the Blogger Blog post, you have successfully generated an HTML table of content.
You may now edit the table of content header and configure the table of content in either the Number list or the Bulleted list.
After the last check, publish the article, and your "table of content" is available for your user.
You may quickly develop a table of content on your blogger website if your posts are extensive in this manner.
After the last check, publish the article, and your "table of content" is available for your user.
You may quickly develop a table of content on your blogger website if your posts are extensive in this manner.
How to Implement a Smooth Scrolling Effect in a Manual TOC
Using a CSS file, you can quickly add a smooth scroll effect to the manual Table of Contents we just added above.
Add the CSS file below to the theme editor immediately above the ]]>/b: skin> tag, or put it into your theme customizer's "add CSS" area.
Copy the CSS code to get the smooth scroll effect.
scroll-margin-top: 40px;
}
html{
scroll-behavior: smooth;
}
@media (prefers-reduced-motion:reduce){
html{
scroll-behaviour: auto;
}
}
How to Add Automatic Table of Content Blogger
In this approach, you must first add specific CSS and JavaScript files to your Blogger theme before pasting a Shortcode into each blog post where you want the table of contents.
It is a simple way to add an excellent TOC, but it will slow down your loading performance. As a result, I propose that you utilize manual HTML-based Toc.
Before you begin, ensure your theme supports jQuery and Font Awesome Icons. The majority of new themes (i.e., templatify themes) support this.
You may test this by searching for the word in your theme's HTML section.
Step 1: In the theme section, click Edit HTML and paste the code directly after the </body> tag.
Step 1: In the theme section, click Edit HTML and paste the code directly after the </body> tag.
<script async='async'>
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h3 onclick='toc()'>➡️Table of Contents</h3><ul style='display:none'>";$("article h2, article h2, article h3, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h2, article h3, article h5").each(function(){el=$(this),title=el.text(),link="#"+el.attr("id"),ToC+=newLine="<li><a href='"+link+"'>"+title+"</a></li>"}),ToC+="</ul></nav>",$(".toc-pro").prepend(ToC);function toc() {$(".table-of-contents ul").toggle();}</script>
/* TOC */
.table-of-contents{flex:auto;width:fit-content;background:#eee;font-size:14px;padding:11px;margin:8px 0 30px 0}
.table-of-contents li{margin:0 0 0.25em 0}
.table-of-contents a{color:#2a5365}
.table-of-contents h3{margin:0;cursor:pointer}
<div class='toc-pro'></div>
Customize the CSS code in the Automatic TOC
You may further personalize your Table of Contents by modifying the CSS code provided in Step 2. The color code will be something like #2a5365. As a result, you can substitute your color code.
To begin, visit the website's HTML color codes and select your color code. Change the code #eee to alter the background color and #2a5365 to change the text color.
To raise the text size, you may also change the code font size from 14px to another size, such as 18px. [adjust the text size to match your theme]
You may also easily modify the padding and margin to suit your needs.
Video Tutorial
Frequently Asked Questions
What is a Table of Contents in a Blogger blog?
A Table of Contents, or TOC, is a list of the headings and subheadings in a blog post, usually found at the beginning of the post, that allows readers to quickly navigate the post and jump to the section they are most interested in.
How do I add a Table of Contents to my Blogger blog?
You can add a Table of Contents to your Blogger blog using the built-in TOC widget, which can be found in the "Layout" section of your blog's dashboard. You can also use third-party TOC plugins or widgets to add a TOC to your blog.
Can I customize the appearance of my Table of Contents?
Yes, most TOC widgets and plugins allow you to customize the appearance of your TOC, including font size, color, and style.
How do I update my Table of Contents when I add or remove headings in my blog post?
Most TOC widgets and plugins will automatically update when you add or remove headings in your blog post. However, some may require you to manually update the TOC to reflect the changes in the post.
Can I add a Table of Contents to multiple blog posts at once?
Yes, you can use the TOC widget or plugin to add a TOC to multiple blog posts. Some plugins also allow you to apply TOC to all posts simultaneously.
Can I add a Table of Contents to my homepage?
It depends on the theme and widgets you are using. Some widgets and plugins allow you to add TOC to the homepage. But it's not a standard feature.
Can I add a Table of Contents to my pages?
It depends on the theme and widgets you are using. Some widgets and plugins allow you to add TOC to pages as well. But it's not a standard feature.
Stay Connected
I hope you liked the above informative content. Please share this post and follow our blog for more great content.
If you have any questions or problems, feel free to ask in the comments section.
© Copyright: TechiFeed
