Best Table Of Contents Plugin For blogger blogspot(A click)
Introduction
After many years ago, when Blogger blogspot was launched in early 2000s by Google services as free domain. Right from that time till today even now there's no direct plugin for Automatic Table Of Contents for Blogger blogspot. This restricted by that same Google domain webhost.
One thing in Blog/Website is that, if your blog content doesn't look professional it wouldn't encourage the reader to go through all content Step by Step instructions and not only that but also keep them out of your updates no matter how sensitive it may be, why all these because there is no straight to the point in your blog i:e "Table Of Contents". These spurs our colleagues like web publishers/Content writers to struggling to find out way how they can add table of contents into blogger blogspot post through the HTML Template.
But thank God for I am here to show you the best and easy way to add Table Of Contents plugin into your entire Webpage for the published blog post or new blog post, without changing of your Template HTML codes.
But before we rough to get that, let's know some facts about TOC here.
What is a Table of Contents?
A Table of Contents or TOC is a small piece of content in a tabular format which is usually seen before the first part of a post or article. It lists down all the headings or sub-headings of your posts or article in a table.
What is Automatic Table of Contents?
Automatic Table of Contents permits us(Blogger) to arrange all the headings and subheadings tags from your blog-post automatically without manually characterizing the heading tags and makes it into a pleasant table for your audience to navigate.
Whenever you visit Wikipedia, you find TOC on each and every article you read, right! Doesn't it make us simple to explore the article and hop directly into that specific passage or point?
Obviously, it does, and its because Wikipedia automatically selects the heading labels and prepares Table of Contents out of it.
What are the advantages of using Table of Contents?
As you know that TOC appears just above the start of your posts just after the first paragraph. Your audience can simply take up a few lines on the top page of your whole post.
Therefore, a well-planned Table of Content can adversely help in:
- Giving a professional look to your post or article.
- Arranging points of your post or article in a systematic way.
- Managing your audience's expectations, since it provides a high-level view of your posts or article.
- Providing a roadmap for your audience to easily navigate your whole post or article.
Can TOC Improve User Experience?
User experience is a significant part of a blog post or article, which lots of Bloggers nowadays don’t take seriously.
Do you know, according to research, user experience is the key to get higher ranking in SERP. And to improve the user experience of your blog, the table of Content will help.
According to research, more than 80% of total web readers only read the important points of a blog post or article. One should implement TOC only when the article or post length is good enough and the article or post has more than 3 headings.
Does the Table of Contents Improves SEO?
Why not?, Table of content can help in SEO as well. Check out the reasons -
1. When you write long post or article and create a table of Content, your content gets divided into sub-sections, each with about different aspects on the same topic.
So, with a longer blog post or article, your blog is likely to rank better in search engines and Do you know that Google considers longer post as a ranking factor.
It also increases the Click-Through-Rate or CTR of your website as Google displays a ‘Jump to Section link’ crawled from the Table of Contents of your blog post or article and displays the most relevant result to the users.
Features of this TOC Plugin
This plugin is coded in JavaScript and CSS.
We don't encrypted any of the code either by adding of my name as the content writer or my website name in code text.
It is for all Blogger blogspot Templates/Themes, without any Error Detected.
It has been designed in such a way that it won't load until your entire webpage is loaded.
It is lightweight and won't affect your page load time.
This plugin is SEO friendly and will help to rank your page in search engines.
This plugin contains a toggle button to show and hide TOC list.
It is highly customizable and responsive.
The best part is, this plugin executes only when invoked. That is you can enable or disable TOC on a specific page or post.
And you're going to put into two places only, no changing of your Template default HTML codes.
How to add table of contents in blogger?
1. Log into your Blogger
2.Select "Template or Theme" and click on "Three Dots" or the "drop down button"
And paste the below Code just Above the ]]></b: template-skin> as shows.
Copy and Paste 👇:
/* 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:3;cursor:pointer}
After the search on this code also Code- </body> and paste Code just after the </body> tag. Like the below screenshot.
Copy and Paste 👇:
<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").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>
Now click on the 3 dots at the left top and Click the save button or option, you are now added the plugin for Automatic Table Of Contents, let's see how it would show before your readers.
How to show TOC in blog post?
In order to activate TOC in your Blog post or article, while writing a new post switch to "HTML" mode and then paste the below code just after the first paragraph or before your first heading tag. Make sure that any keywords you want add it to Table Of Contents must be h1, h2, h3, h4, before it can be added to the TOC, just change the keyword from paragraph to "Heading" "Subheading" or "Minor Heading" Then you do this.
<div class="toc-pro"></div>
Always remember to add the code in your blog post if you expect TOC to be added.
Now that you have Activated the TOC do a preview, you will see something like this, below screenshot.
Conclusion:
Finally that is the Best Table Of Contents Plugin For blogger blogspot(A click) how do you see it simplicity? Isn't that easy and legit? Yes, it is. The above methods work in all Blogger Templates/Themes Do no misbehaving fast and smooth scrolls or loading. Take a real time and follow instructions as well, do and let us know how successful it is.
Today's tutorial Best Table Of Contents Plugin For blogger blogspot(A click) has been so insightful, and that it’s going to help you avoid some of the early mistakes in Blogger Settings and technologically challenged. If you want us to expand on any of the points discussed here, feel free to submit your questions or suggestions in the comment section below. Don't be ignorant of our featured Posts, follow Us Facebook, WhatsApp, Twitter, Subscribe to our Newsletter For Updated Post. Kudos