How to Create an Automatic Table of Contents, How to Add Table of Contents on Blogger
Do you want to learn how to add a Table of Contents on Blogger for your blog posts? If yes, then this article is for you. Through my research, I have found that new bloggers often get confused about what Table of Contents is, its benefits, how to use a Table of Contents, and how to add it to Blogger.
Firstly, let me tell you that the basic concept of Table of Contents was initiated by the author Pliny the Elder. He did this to make reading easier for readers, allowing them to easily navigate through their destination. This practice was initially adopted to facilitate reading books and later extended to articles.
When it comes to the Table of Contents, it is a combination of headings and subheadings in a blog post. If you write articles on Blogger, before adding a Table of Contents on Blogger, you should understand what a Table of Contents is. Only then can you fully benefit from it. If you neglect to do so, you might fall behind your competitors.
> Step by Step guide to start blog
If you want to know how to add a Table of Contents in Blogger, be sure to read this article to the end. This article will be very useful for you.
How to add Table Of Contents (TOC) in Blogger
The Table of Contents in a Blogger website is a tabular format of any post that provides a structured overview of the post. In this tabular format, all headings and subheadings related to the post (such as h1, h2, h3, h4) are listed. All headings and subheadings of the post are displayed to users in the form of clickable links.
When a user visits a web page from one of the suggested web pages on Google’s SERP (Search Engine Results Page), the Table of Contents helps the user understand what topics are covered in that post. If a user has limited time, they can click on their desired topic in the Table of Contents on Blogger and directly navigate to that specific section.
If you write long content in your posts, similar to Wikipedia, it is advisable to add a Table of Contents on Blogger. This makes it easier for your users to navigate through your blog post.
Benefits of Table Of Contents (TOC) in Blogger
TOC stands for Table of Contents, and it appears just after the first paragraph and before the H2 heading on any webpage. TOC is placed in this location because when readers visit your blog post, their attention is directed to the table of contents first. This enables them to quickly and easily navigate to their desired topic. Using Table of Contents on Blogger can provide you with several benefits, which I have described below:
- Enhanced Navigation: TOC allows readers to quickly jump to specific sections of your blog post, enhancing their overall navigation experience.
- Improved User Experience: Readers can get a structured overview of the post content, making it easier for them to find relevant information.
- Time-Saving: Users with limited time can use TOC to directly navigate to the sections that interest them the most, saving time and improving user satisfaction.
- Professional Appearance: A well-designed TOC adds a professional touch to your blog post and can make it look more organized.
- SEO Benefits: Having a TOC can also have potential SEO benefits, as search engines may use the structure to understand the content hierarchy.
- Reduced Bounce Rate: Readers are more likely to stay on your page and explore different sections when they can quickly find what they are looking for.
- Accessibility: TOC is particularly helpful for people with disabilities, as it provides a clear and organized structure that can be navigated easily.
- Encourages Engagement: Users are more likely to engage with your content when they can easily locate information that aligns with their interests.
- Customization Options: Blogger allows you to customize the appearance and style of the TOC to match the overall design of your blog.
- Reader Retention: Providing a user-friendly experience with a TOC increases the likelihood that readers will stay on your site and return for future content.
Will Table Of Contents help in SEO?
Creating a Table of Contents (TOC) is indeed a valuable factor in making a blog post SEO-friendly. It greatly assists in optimizing your post’s On-Page SEO.
If you write long-form content, the post might become lengthy, potentially leading to user boredom. In 2023, users have limited time and prefer quickly finding the information they need. By incorporating a TOC, you break down the content into subsections, with each section highlighting a specific topic. This not only helps users quickly navigate to their area of interest but also provides a structured overview of the content.
Moreover, when you create a table within your long content, each section becomes a sub-section, addressing a particular topic. This structure is beneficial for SEO, increasing the chances of improving your website’s traffic. Additionally, when you integrate Google AdSense into your website, a TOC can contribute to enhancing Click-Through Rate (CTR). If you have not yer got your adsense approval then you can check our comprehensive guide to get google adsense approval.
In summary, a Table of Contents plays a crucial role in improving the user experience, optimizing your post for search engines, and potentially increasing revenue through platforms like Google AdSense.
How To Add Table Of Contents In Blogger?
Now that you’ve learned what Table Of Contents is and the benefits of adding it, let me guide you on how to create a table of contents on Blogger. The process mostly involves working in the HTML section:
You probably already know that there are numerous plugins available for adding a Table Of Contents in WordPress. However, when it comes to Blogger, the most effective way to add a Table Of Contents is by working with HTML.
If you’re not well-versed in HTML, there’s no need to worry too much. By following the steps I’m about to outline, you can easily add a Table Of Contents to your Blogger blog.
However, it’s crucial to remember to back up your Blogger template . Check top7 free blogger template for 2024. This way, if any issues arise, you can revert to the backup and start fresh. Now, let’s get started on how to add a Table Of Contents in Blogger:
Step1. Login Into Blogger.com
In this, you first need to go to your Blogger dashboard and click on “Theme”. Check free wordpress theme
After that, you need to click on “Edit HTML” for your template, as shown in the image:
Step 2. Search </head> tag
In this step, after navigating to the Edit HTML of your template, you will see some codes like this. You need to click anywhere on these codes and then use Ctrl+F to search for </head>
. You will find </head>
highlighted in yellow. After that, you need to paste the code provided below right before </head>
and then click on the save button to save your changes.
<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
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. Search For ]]></b:skin> Code
In this step, after finding the ]]></b:skin>
as shown in the image, you need to search for it. Once you find the ]]></b:skin>
code, you have to paste the CSS code provided below right above ]]></b:skin>
.
.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. Search For <data:post.body/>
In this step, you also need to follow the same process. First, you have to search for <data:post.body/>
, then after finding <data:post.body/>
, you need to replace it with the codes provided below and save it.
<div id="post-toc"><data:post.body/></div>
All done!!
How To Show Table Of Contents In Blogger Post
Now I will tell you how the Table Of Contents will appear in a Blogger Post. For that, it is crucial to save the codes obtained from the template HTML, as you can place these codes anywhere in your blog post as per your preference, such as before or after the Heading tag H2. Now follow the steps below:
Step 1. Choose TOC Box Location
To add a table of contents in Blogger, the first step is to choose its location. While you can select any location based on your preference, the optimal position for the TOC is typically just before the <h2> tag. This location grabs users’ attention first.
To integrate the TOC, follow these steps:
- Choose the Location:
- While in the HTML editor of your blog post, select the place where you want the Table of Contents. Placing it just before the <h2> tag is often a good choice.
- Switch to HTML View:
- In your Blogger post editor, locate the “HTML” or “HTML View” tab.
Now, you can proceed to add the code for the Table of Contents at the chosen location in the HTML view of your blog post.
Then, click anywhere in that code and search for the heading tag <h2>.
After that, you need to paste the code provided by me below the tag in the following manner:
<div class="mbtTOC">
<button onclick="mbtToggle()">Table Of Contents</button>
<ul id="mbtTOC"></ul>
</div>
Step 2. Add This Code
This step is the last step to add a table of contents on Blogger. In this step, you need to add the code provided below at the very end of your blog post, as shown in the image:
<script>mbtTOC();</script>
After completing this step, you need to publish your blog post. After that, you will be able to see the result where you’ll find that your Table of Contents has been successfully added. Now, your visitors can easily navigate to any topic of their choice.
Conclusion
Friends, a Table of Contents is crucial for any website, whether it’s on Blogger or WordPress.
The TOC guides your visitors to the location of their relevant topics in the article, allowing them to reach their desired content without wasting time. Additionally, it assists Google’s web crawlers in better crawling your post.
If your blog post is short, adding a Table of Contents may not be essential. However, if your content is lengthy, it is advisable to include a Table of Contents in your post.
According to researchers, more than 79% of web readers only read important information on a web page. If you put yourself in the shoes of those readers, you are likely to focus on only the essential points on a web page.
Considering this result, you can estimate how crucial a Table of Contents is. It not only enhances user experience but also aids in SEO.
In the above article, you learned what a Table of Contents is, how to add it in Blogger, its benefits, and more. I hope this article proves helpful for your needs.
Q1. How to customize table of contents?
Ans. Most bloggers might not know how to change the font, background color, headline, etc., in the Table Of Content box. I want to tell you that you can easily customize the Table Of Contents according to your preferences. I have provided you with the code “]]>”, and you need to make some changes in the codes. Then, you can give your Table Of Contents the look you want. Follow the points below to change the codes:
To change the font size of the Table Of Contents headline text, edit it to 20px.
To change the font size of the Table Of Contents anchor links, edit it to 15px.
To change the background color of the Table Of Content box, edit it to #FFFFE0.
To change the border color, edit it to #EE5535.
To change the anchor link color, edit it to #0080ff.
Finally, to change the font color of the Table Of Contents headline text, edit it to #707037.
Q2. How to arrange headings in table of contents?
To arrange headings in the Table Of Contents, you first need to write the title of your post in chronological order, similar to a research paper. After that, you should write subtitles or subheadings. Then, you need to assign page numbers to headings and subheadings.
Q3. What is Automatic Table Of Contents?
Automatic Table Of Contents allows you to organize all the headings and subheadings tags in your blog post without manual changes.
Sir, I am disappointed never found your this blog earlier. But now i am very happy and will improve myself with your advice and post.
I want to ask to thing:
1. What theme you are using?
2. Is there any website in blogger platform which we can follow ?
Very Very Thank you
Dear Santu, My websites are in WordPress and currently I am using Newspaper theme. Pavan Sir is planning to publish a video on blogger with all the details and should help you. If you are looking to migrate to wordpress then please drop a mail to hosting@akonline.co.in for any assistance
मैंने आपके आर्टिकल की मदद से ToC Add कर ली है मैंने बहुत सारी YouTube पर वीडियो देखी और कई आर्टिकल भी पढ़ें लेकिन उनके कोड से यह ToC Add नहीं हो पाई।