Hello! Bloggers, Today in this article, I am going to show you how to add Table Of Contents in blogger post like WordPress Automatic Table of Contents plugin.
As you know that the blogger or blogspot doesn't support WordPress plugin but by the help of this tutorial, you can make it possible. Because this tutorial is the only one tutorial of its type till this date which will show you how to add table of contents in blogger post like wordpress method.
What is Table Of Contents?
Table Of Contents is a tool which helps to showcase all headings and sub-headings of the contents of your blog to your blog visitors in a short, simple and user friendly summary in a table format.
What is Automatic Table Of Contents?
Automatic Table Of Contents is an advanced tool which automatically arranges all headings and sub-headings of the contents of your blog in a short, simple and user friendly summary in a table format.
You can say that it is just like the table of contents of a book but believe me, it is more advanced than that. You must be thinking that in the table of contents of a book, there are headings of the related topics along with their page numbers and you need to turn out the page number of the book to read about a particular topic. So how is the automatic table of contents different from that? In automatic table of contents, we don't need to turn out the page number to read about the particular topic. Infact, we can directly read the particular topic by clicking on the particular heading of the table of contents.
How does the Automatic Table Of Contents Work?
To make the automatic table of contents functional, you need to add headings, sub-headings and minor headings in your blogger post.
Because the automatic table of contents summarizes headings, sub-headings and minor headings to give a sweet and simple table of contents design.
To see the contents of the automatic table of contents, you simply need to click once on it. And to read about the particular topic, you simply need to click once on the given headings, sub-headings or minor headings.
What are the Advantages of using Table Of Contents?
1. It helps to give a professional look to your post or article.
2. It helps to arrange the important points of your post or article in a systematic way.
3. It helps to provide a roadmap to your audience to easily navigate your whole post or article.
4. It helps your blog visitors to save their time and effort to search about a particular topic in your blog.
5. It gives a user friendly experience to your blog visitors.
6. It helps your blog in search engine optimization (SEO) to get appeared in the Search Engine Result Page (SERP).
7. It helps your blog to rank faster in the search engines like Google, Yahoo, Bing, Yandex, etc. to get a large volume of traffics.
Features of this TOC Plugin
1. It is SEO Friendly light weight plugin.
2. It doesn't affect the loading speed of your blog.
3. It requires only one time setup in theme.
4. After setup, you can use it for lifetime without doing any type of coding in blog.
5. It has a toggle button to hide and show TOC.
6. It is highly responsive and customizable.
7. The best part is that it executes only when invoked. You can enable or disable TOC in a specific post or page within a few seconds.
Note - Make sure you take a backup of your theme before customizing or making changes to your theme so that if something goes wrong, you can restore your original theme.
So dear bloggers, here we go. The main, easy and simple tutorial is just below. You just to follow each and every step given in the tutorial titled 'how to add table of contents in blogger post'.
Download Table of Contents Plugin Codes
How To Add Table of Contents in Blogger Post
1. Log into your Blogger.
2. Go to 'Theme' and click on 'Dropdown' icon then Click on 'Edit HTML'.
3. After clicking on 'Edit HTML', click once anywhere on the 'Theme' code then press CTRL+F from your keyboard to get a search box.
4. Now search for the ]]></b:skin> and paste the CSS code just above the ]]></b:skin> tag.
5. Again search for the </body> and paste the JavaScript Code just above the </body> tag.
6. Lastly search for the <data:post.body/>, there can be more than 1 tag, Replace all of them with the HTML Code.
7. So we are done. The coding part has ended here, Click on 'SAVE' button.
How To Activate Table Of Contents In Blogger Post
1. Copy the ShortCode.
2. Paste the ShortCode in the desired section of your blogger post in the 'Compose' view.
3. Select the code and make it bold.
4. Click on 'Update' or 'Publish' post button.
Congrats! we have successfully installed Table of Contents in Blogger. So that's the end of the tutorial 'how to add table of contents in blogger post'. When you view your blog post, the Table of Contents will look like this:
Note - If the Table of Contents is working properly, then it is all right. If it is not working properly even after following the above given steps, then you need to add jquery plugin in your Blogger Theme. Jquery plugin is already installed in the most of the latest blogger templates. But if you are using old templates, you need to add jquery plugin manually.
So, comment below if you want me to show you how to add jquery in Blogger.