Creating table of contents is the major problem for the blogger or blogspot users. Because Blogger.com is not allowed to add external plugins like WordPress. If you want to add a table of content in the blogspot post then you should have knowledge about coding. But, if you don’t have knowledge about coding then don’t worry because today, in this post I will be presenting how to add a table of contents in a blogspot post or blogger.
However, at the end of this article, you can easily create a table of content for your blog post. So, let’s get started and look at the easiest method to add a table of content in a blogger or blogspot.
Table of Contents
- What is Table of Content?
- What is Table of Content used for?
- Characteristics of Using Table of Contents in the Post
- Are TOC good for SEO?
- Can table of content improve user experience?
- How to add table of content in blogspot post or blogger?
- How to show table of content in Blogger Post
- Final Conclusion
What is Table of Content?
A table of content is an organised piece of content in the post through which we can demonstrate what content (headings and subheadings) inside the post. It helps us to jump directly on those headings or subheadings that we want to read. A table of content usually seen before or top right sidebar of the article or post.
You can see in the below picture, how a table of contents looks like.
You might also like this: Best idea to write compelling blog posts.
What is Table of Content used for?
Table of content used to jump to that section which we are looking for. It means without scrolling the complete blog post, we can easily go to that headings or subheadings. It also helps to increase user experience.
Characteristics of Using Table of Contents in the Post
Adding a table of contents can improve your user experience as well as SEO. Users can easily navigate through and read. However, if you add TOC at the beginning of your post then the audience can look up your whole post without scrolling the complete page. Therefore, you can have more benefits by using the table of contents which are given below.
- Improve user experience
- Present systematic content to the users
- Makes it easier to navigate each sections of the post
- Increase CTR from search
- Improve your SEO
Are TOC good for SEO?
Of course, Table of content improves your SEO as well. Nowaday, Google search engines are smarter than you. Whenever you publish any post or article, they easily identify whether this post is valuable to the audience or not. Suppose, you write a long article of more than 5000 words and you include a table of content then Google will treat your article as a good article. Because Google considers longer posts as a ranking factor.
Table of content also increases the click-through-rate of your website as Google displays a ‘Jump to section link or Anchor links’ crawled from the TOC of your blog post and displays the most relevant result to the users.
You might also like this: What are the basic steps to start a blog?
Can table of content improve user experience?
According to research, people aren’t interested in reading entire blog posts. They only want to read the important points that they are looking for. You’ve only got 10-15 seconds to capture a reader’s interest.
If they aren’t able to find their answer with ease, they’re going to bounce fast. A table of contents allows users to see exactly what this post is about. Once you include a table of content in the post or article, they can easily find their answer without scrolling the entire blog post. They can use TOC to jump that section. However, if you want to improve your user experience then must use a table of content.
Note: I highly recommend taking backup of your template before doing any changes on your template because it might lose your original template and create some problem so please take backup so that you can restore your template whenever you want your original template.
How to add table of content in blogspot post or blogger?
Follow the following steps to create a table of contents in the blogger post:
Step 1 – First login into your blogger dashboard.
Step 2 – Click “Theme” from the left side menu bar after that click on a little downward arrow and then click “Edit HTML”.
Step 3 – Once you click on Edit HTML, your theme HTML template will be open. Now, you’ve to search for </head> (press CTRL + F key from your keyboard)
Step 4 – Now paste the script code just above the closing </head> tag as shown in the below figure.
<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 5 – Now find ]]></b:skin> tag and copy the following CSS code and paste it just above the line as shown in figure.
.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 6 – Finally search for <data:post.body/> tag, there are more than one <data:post.body/> tag, replace all of them with the below HTML code.
<div id="post-toc"><data:post.body/></div>The coding part has been done. Now, it’s time to add a table of content into blogspot posts. To do this, follow the below process.
How to show table of content in Blogger Post
We’ve seen the coding part for implementing TOC in the blogger blog post. In this section, we’re going to see how we can show the table of content in the blogspot posts.
Follow the following steps for showing a table of content in the blogspot post.
Step 1: Click “New post” or Edit your existing post (which we’ve already published).
Step 2: Switch your post editor dashboard into “HTML” mode.
Step 3: Copy the below HTML code and paste it before the first heading tab or after the first paragraph.
<div class="mbtTOC">
<button onclick="mbtToggle()">Contents</button>
<ol id="mbtTOC"></ol>
</div>
Step 4: Now, copy and paste this script code at the end of your post in order to activate the table of content. After pasting this code, hit publish button and table of content will be generated automatically.
Boom! Once you’ve done this process, the table of content will automatically be shown in the blogger or blogspot post.
Final Conclusion
I hope this tutorial helped you out to fix your problem on how to add a table of content in a blogspot post. I tried to make this process simple for you so that you do not face any problem while you do any changes on your blogger template. But, I highly recommend that you take the backup of your blogger site.
The above code is written by MBT and credit goes to the owner of MBT. If you face any problem then please let me know in the comment box. Always remember our site URPN.org to get all updates related to blogging tips.
I hope you’ve enjoyed reading this post, if YES then share this post with your valuable friends.