How to Add Table of Contents in Blogger
How to add table of contents in blogger? Want to add a table of content to your blogger website but don’t want to compromise on loading speed then this blog is for you.
 |
| How to Add Table of Contents in Blogger |
In this guide, I will show you how you can add a table of content [TOC] inside the Blogger blog post using a simple line of HTML code. So, It won’t affect the loading speed as it doesn’t require any CSS or JavaScript code to function in the table of content.
I will also guide you to add an automatic table of content in Blogger using CSS & JavaScript. So, choose the manual/ automatic option according to your choice.
But, before we start if you are new to our website then you can Bookmark or subscribe to our newsletter for upcoming Blogger tips and tricks.
What is a table of content?
A table of content is basically a quick link or a jump link that helps the readers to skip to a specific part or heading with a single click. It highlights the critical section of the article in order to improve the user experience.
SEO Benefits of the table of content
When you are writing long-form content around 2000 to 3000 words with multiple headings and subheadings, it will be difficult for the user to better understand the structure of the article.
As you know, the attention span of readers is very low and if they found a long-form article, they will bounce back and prefer a short-form article where the solution is given precisely. But if you provide a table of content at the beginning of the blog post, they will jump to the section and get the information they need.
There are several SEO benefits of having a table of content on the website. It helps search engine bots to better understand the article and it will display rich snippets in search results.
So, the user can directly skip to a particular section of the blog post right within the search result.
How to add a simple table of content in Blogger blog posts. [manual method]
Most of you heard about the JavaScript-based automatic table of content that generates a table of content automatically recognises the heading tag.
But, it slows down the loading speed of web pages as it is a JavaScript-based method. It requires multiple resources and increases the webpage size.
That’s why I will share with you the alternate method where we will add a simple table of content without changing the coding of your blogger theme.
You just need to tweak some code inside the post editor using the HTML view. So, follow the step-by-step methods to create your own table of content on the Blogger website.
Step-1: Create a new post or open an existing post where you want TOC.
Step-2: Now switch to HTML view and type CTRL+F and search for heading tags like h2, h3, etc.
Step-3: Now add Shortcodes like id=“1”, and id=“2” on the heading tag as shown in the below screenshot.
Step-4: Now switch back to Compose view and copy all heading and paste in plain text as shown below.
Step-5: Now select 1st heading text and click on the link button and type #1 and save it.
Step-6: Now replace all plain headings with a link like #2, #3, etc, and save it.
You have successfully created an HTML table of content in the Blogger Blog post. Now customize the table of content heading and you can set the table of content in the Number list or Bulleted list.
Now publish the post after the final check and your “table of content” is ready to use by your user.👍
In this way, you can easily create a table of content on your blogger's website where posts are long and detailed.
How to add a smooth scroll effect in manual TOC
You can easily add a smooth scroll effect to the manual Table of content that we just added above using a CSS file.
Just add the below CSS file to the theme editor just above the ]]></b:skin> tag or paste it in the "add CSS" section of your theme customizer.
h2[id], h3[id] {
scroll-margin-top: 40px;
}
html{
scroll-behavior: smooth;
}
@media (prefers-reduced-motion:reduce){
html{
scroll-behaviour: auto;
}
}Here note that this code will work for h2 and h3 tags on the page. You can further add more tags in the above CSS code by adding tags like h4[id], h5[id], etc.
If you face any problem you can ask me in the comment section or directly contact me on Twitter or Telegram. I will guide you in the learning process.
🎥Video Guide:
Note: You can customize your Table of content using inline CSS and Blogger editor.
How to add Automatic Table of Content in Blogger
In this method, you have to add some CSS and JavaScript files to your Blogger theme and after that, you need to paste Shortcodes in every blog post where you want the table of content.
It is an easy method to add a stylish TOC but it will slow down your loading speed a little bit. That's why I recommend you use manual HTML-based Toc.
Note: Before proceeding with the steps make sure your theme support jQuery & Font Awesome Icons. Most of the new themes (i.e templateify themes) support this. You can check this by searching the word in the HTML section of your theme.
STEP-1: Click on Edit HTML in the theme section and paste the code just after the </body> tag.
<script async='async'>
var head,newLine,el,title,link,ToC="<nav class='table-of-contents' role='navigation'><h4 onclick='toc()'>➡️Table of Contents</h4><ul style='display:none'>";$("article h2, article h3, article h4, article h5").attr("id",function(arr){return "point" + arr;});$("article h2, article h3, article h4, 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>STEP-2: Paste the below CSS code just before this code ]]></b:skin>
/* 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 h4{margin:0;cursor:pointer}
STEP-3: Now go to the Blogger post editor and switch to HTML view and paste the below shortcode where you want to add TOC.
<div class='toc-pro'></div>Now you have to paste the Shortcodes on every blog post where you want to generate the automatic table of content.
Customize CSS code in Automatic TOC
You can further customize your Table of content by changing the CSS code given in Step 2. You will see the Color code #2a5365. So, you can replace it with your own colour code.
▶First of all, Go to the website htmlcolorcodes and pick up your colour code and change the code #eee to change the background and #2a5365 to change the text colour.
▶You can also increase the text size by changing the code font size 14px to another size like font size 18px. [ change to match your theme text size]
▶You can also easily change the padding, and margin according to your need.
New Updated Automatic Table of Contents
If you want to Add a multi Level automatic Table of contents to your Blogger website then follow the steps as shown in the video.
Frequently Asked Questions
Can a blog have a table of contents?
The table of contents is making a comeback for blog posts. It helps to provide a better experience and can even give your content an SEO boost to increase reach on search engines. It certainly isn't a new concept. Wikipedia has done a great job using this feature.
What is a table of contents in a blog?
A table of contents is a list of jump links that lead to different sections on a page or post. They're particularly useful for long posts, as they highlight the critical sections of an article in order to improve the reader experience. A reader might jump to the section that is most relevant to their question.
How do I post content on Blogger?
1. Sign in to Blogger. 2. Click New Post. 3. Create the post. To check how your post will look when it's published, click Preview. 4. Save or publish your post: To save and not publish: Click Save. To publish Click Publish.
How do I insert a table of content?
On the toolbar ribbon, select References. Near the left end, select Insert Table of Contents. (Or select Table of Contents > Insert Table of Contents. The table of contents is inserted, showing the headings and page numbering in your document.
Conclusion
How to add table of contents in blogger? is explained in this article. Having a table of content in Long-form content is very useful and improves user experience. So, I have shared with you two ways of adding TOC. You can decide whether to use the manual or automatic method.
If you ask me, I prefer to add manual TOC to my Blogger website as it is super fast and doesn't take many server resources and loads fast.
If you like this Guide, do share it with your friends and Join our weekly newsletter in the Footer section.