Hi, I am Eliza, Here I am going to share how to add table of contents in blogger. In wordpress, you will get plugin to add table of content. but in blogger, there is no option to add any plugin. So, you have to add manually automated table of content (TOC) in blogger/blogspot.
Add table of content in blogger is an process to add html/css and javascript code in blogger theme or html editor. However, Let’s start to learn “how to add table of contents in blogger” step by step.
What is Table of Contents (TOC)?
Table of contents is called as TOC, A table of contents is an roadmap of a content or blog post that can help users or readers to understand overall content, that which point covered about the topic in hole content.
Table of contents (TOC) usually contains headings and subheadings of a blog post, that helps user’s to understand and they can easily go to read there need information from the content by click or jump from TOC list.
Benefits of Adding Table of Contents
Adding table of content is most beneficial way to make user-friendly and search engine friendly blog post. Here below I am going to discuss top advantages of adding table of content in blogger.
1) Google Love to See Table of Contents
Google always try to rank well organised content that can give user value and help users to find right information. Having table of contents in a blog post is much important to make well organised content for search engine like Google.
2) Helps to Rank in Featured Snippets
Search engine can rank in featured snippets by pick any heading from a blog post. Table of content (TOC) generally created with headings and subheadings, which must helpful and increase chances to rank in featured snippets.
3) TOC Helps to Increase User Experience
The major advantage of adding table of contents is, it’s helps to increase user experience. User always love to read well organised content, where have table of contents, that will helps to understand overall content and they can easily jump or go to read their need information from the content.
4) Improve SEO Performance by Adding Table of Contents
From SEO point of views, having a table of contents means you have a bullet list with relevant keywords just on top of the blog post or page. The clickable headings with focused keywords will helpful to rank quickly in search engine result pages.
Learn More : how to create static pages in blogger
How to Add Table of Contents in blogger / Blogspot?
To add table of contents in blogger, you don’t need huge knowledge on coding. You can add table of content with some basic knowledge.
However, follow below steps to add automatic and responsive table of content in blogger.
Step 1 :
1. Log in to your blogger.
2. From “Blogger Dashboard“ go to “Theme“ section.
3. Take “Backup“ theme and then click “EDIT HTML“.
Step 2 :
Now search </head> Tag, Then copy and paste the below code above the </head> Tag.
<script type='text/javascript'>
//<![CDATA[
//*************TOC plugin
function mbtTOC() {var mbtTOC=i=headlength=gethead=0;
headlength = document.getElementById("post-toc").getElementsByTagName("h2").length;for (i = 0; i < headlength; i++)
{gethead = document.getElementById("post-toc").getElementsByTagName("h2")[i].textContent;document.getElementById("post-toc").getElementsByTagName("h2")[i].setAttribute("id", "point"+i);mbtTOC = "<li><a href='#point"+i+"'>"+gethead+"</a></li>";document.getElementById("mbtTOC").innerHTML += mbtTOC;}}function mbtToggle() {var mbt = document.getElementById('mbtTOC');if (mbt .style.display === 'none') {mbt .style.display = 'block';} else {mbt .style.display = 'none';}}
//]]>
</script>
Step 3 :
1. Then search “]]></b:skin>“ tag.
2. Copy below CSS code and paste above the “]]></b:skin>” tag.
.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}
Step 4 :
1. Finally search “<data:post.body/>“ tag.
2. There can be found multiple time “<data:post.body/>“ tag.
3. Replace all “<data:post.body/>“ tag with below code.
<div id="post-toc"><data:post.body/></div>
Now finally click “SAVE” theme.
How to Show & Activate Table of Contents (TOC) in Blog Post?
You have take some more action to show and activate table of content in blog post.
– Go to particular post or make a new blog post, where you want to show table of content.
– Switch your post in “HTML“ mode.
– Then copy and paste the below code after first paragraph or before first heading in your content.
<div class="mbtTOC"> <button onclick="mbtToggle()">Contents</button> <ol id="mbtTOC"></ol> </div>
– Then finally copy and paste the below code at end of the post.
<script>mbtTOC();</script>
Now publish post. You will see a good looking and stylish table of content in your published blog post.
(B. D. we pick those code from MBT which is great to use and most seo & user friendly TOC for blogger. So, all code credit should goes MBT.)
FAQs on Table of Contents
What is the proper place to set table of content in blog post?
Table of contents should set after first paragraph or before first heading in the content or blog post, which is user-friendly and your blog post or content should look more professional.
What is the use of table of contents in blog post?
In generally, Table of content in a blog post needs for two purposes : First, it’s give users or readers an overview about the hole content. Secondly, it’s allow users or readers to go directly specific section in a blog post or content to read or collect their need information or documents.
Is Table of contents help in SEO?
It’s not directly impact in SEO, But search engine (like google, bing etc) always love to rank long and well organised content. That’s why having a table of content in long content helps to make well organised content and increase chances to rank your blog post.
Final Thoughts
A table of contents is a great way to make your content or blog post easier to scan through. It creates a content index and makes it easy to understand the long blog posts that you have written. So, Try to add table of content in every blog post.
I have tried to share most beautiful and stylish table of contents for blogger, which will not impact to your page speed.
So, Follow above step by step guide to add table of contents in your blog. I am sure you will get answer of the question “how to add table of contents in blogger“, after implement in your blog.
You May Also Love to Read
How to Make Perfect Google Web Stories
How to Write Plagiarism-free Thesis
4 Factors to Boost Domain Authority
3 Ways to Make Money Online without a Job
How to Start a Travel Blog in India to Make Money
How Important is a Paraphrasing Tool to Deal with Plagiarized Content
Best Keyword Research Tools for SEO
Top Benefits of Businesses in Digital Marketing
How to Write SEO-friendly Blog Post
How to Make a Free Blog on Blogger
Best Off-page SEO Techniques to Boost Ranking
Ultimate SEO Tips to Boost Organic Traffic
How to Become a Professional Blogger
How to Use New Blogger Interface
How to Create Pages in Blogger