demo Codes

What is a Table of Contents?
What is Automatic Table of Contents?
What are the advantages of using Table of Contents?
Can TOC Improve User Experience?
Does the Table of Contents Improves SEO?
Features of this TOC Plugin
How to add table of contents in blogger?
How to show TOC in blog post?
Activating TOC in blog post
Conclusion

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.

Also read: How to Remove Powered by Blogger Attribution

What is Automatic Table of Contents?

Automatic Table of Contents permits us 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 para. 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?

Of course, Table of content can help in SEO as well. Check out the reasons -

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.
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 hide and unhide TOC.
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.

Advice - It is highly recommended to backup your existing template before customizing or making changes to your template as if something goes wrong, you can restore your original template.

Follow the below steps to add TOC in Blogger:

How to add table of contents in blogger?

1. Log into your Blogger

2.Select "Template or Theme" and click on "Three Dots" then Click on "EDIT HTML".

3. Now search for the </head> and paste the below script just above the </head> tag.

4. Now search ]]></b:skin> and paste the following CSS code just above ]]></b:skin> line.

.mbtTOC{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px;font-family:oswald,arial;display:block;width:70%}.mbtTOC ol,.mbtTOC ul{margin:0;padding:0}.mbtTOC ul{list-style:none}.mbtTOC ol li,.mbtTOC ul li{padding:15px 0 0;margin:0 0 0 30px;font-size:15px}.mbtTOC a{color:#0080ff;text-decoration:none}.mbtTOC a:hover{text-decoration:underline}.mbtTOC button{background:#FFFFE0;font-family:oswald,arial;font-size:20px;position:relative;outline:none;cursor:pointer;border:none;color:#707037;padding:0 0 0 15px}.mbtTOC button:after{content:"\f0dc";font-family:FontAwesome;position:relative;left:10px;font-size:20px}

5. Lastly search for the <data:post.body/> , there can be more than 1 <data:post.body/> tag , Replace all of them with below code.

6. The coding part ends here, Click on "SAVE" and you are all done!

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.

<div class="mbtTOC"> <button onclick="mbtToggle()">Contents</button> <ol id="mbtTOC"></ol> </div>

Activating TOC in blog post

To active the TOC plugin paste the below Javascript code after the end of your post.

Hit the Publish Button and Boom! TOC has been generated successfully

Conclusion

I have tried to keep this guide as simple as I can, also I have minified all the codes which will not affect your blogs page speed.
I hope, you found this post on how to table of contents in blogger helpful. If you encounter any error or issues comment below and I would help you to figure it out.

This plugin was created by MBT and all credits goes to the owner of MBT.

demo Codes

details code

the english learning in the india is the best coching center for kanker aaryan institude

the coching center ceo for sir aaryan chiram or's form kodagaon kanker

the english learning in the india is the best coching center for kanker aaryan institude

the coching center ceo for sir aaryan chiram or's form kodagaon kanker

toc

What is a Table of Contents?

What is Automatic Table of Contents?

What are the advantages of using Table of Contents?

Can TOC Improve User Experience?

Does the Table of Contents Improves SEO?

Features of this TOC Plugin

How to add table of contents in blogger?

How to show TOC in blog post?

Activating TOC in blog post

Conclusion

faq system

the english learning in the india is the best coching center for kanker aaryan institude

the coching center ceo for sir aaryan chiram or's form kodagaon kanker

the english learning in the india is the best coching center for kanker aaryan institude

the coching center ceo for sir aaryan chiram or's form kodagaon kanker

stcky menu bar

form

Recent Posts

Facebook

Labels

Comments

FOLLOW ME

LATEST

Top Links Menu

Top Links Menu

Menu based on Icons

कुल पेज दृश्य

Archive

Sections

Campus

Courses

Testimonials

Search This Blog

Blog Archive

Latest video-course

Campus

About

Testimonials

facebook

Blogger Tutorials

Main Menu

Header Background

Logo

Section Background

Section Background

Ads block

Courses

Section Background

Search This Blog

ABOUT

Contact us-desc:Feel free to contact us at anytime about our courses and tutorials.

Popular Labels

Mobile Logo Settings

Labels

Categories

Social Plugin

SEARCH

Popular Posts

Flickr Images

Follow Me on Facebook.com

Flickr Photos

Video of the Day

About

Popular Posts

Popular Posts

Tags