How to Add Table of Content (TOC) in Blogger Blog posts using HTML and CSS Manually

byadmin •
0

As we all know that blogger does not support any plugin like wordpress and hence sometimes it is quite difficult to work unless some alternate method is implemented for the work. Same was the case with Table of Contents, I was looking for a simple way to add separate TOC to any blog post where it is needed.

For the past few days, I was constantly looking for a good Table of Contents (TOC) for my blog but the problem was that I didn't want any automatic TOC for the blog, so I was looking for a manual TOC. For blogger blog using HTML and CSS only. In this article, you will learn how to manually add a Table of Contents (TOC) to any Blogger blog post.

According to SEO, adding a content table to the blog is very important. There are many other SEO and user experience benefits in adding a table of contents to any blog post. The Table of Contents makes it easy for any search engine to rank the paragraphs and also improves the traffic of the blog.

What is Table of contents (TOC) ?

An overview of the structure of any article is called a Table of Contents. Table of Contents is a combination of headings and subheadings inside your post, which saves users time. For example, suppose you have written 15 titles of one of your posts and if the user wants to read a particular title out of 15 then he has to scroll up or down. But if your post has a table of content ad, then as soon as he clicks on that topic, he will immediately jump to that topic and will be able to read it quickly and it will also save his time.

What are the benefits of using Table of Contents (TOC) on Blogger Blog Posts ?


Table of Contents TOC is a feature you often see on Wikipedia pages to provide easy navigation to long articles. Table of Contents (TOC) gives a good user experience to the readers and helps to jump from one section to another easily and also saves the time of the user. Let us now know about some of the special benefits of Table of Contents (TOC).

  1. Table of Contents (TOC) will give a professional look to our blog post. Due to which our blog post will look like a WordPress website to the users. Table of Contents (TOC) will organize all the headings and subheadings of your blog posts in an orderly manner.
  2. When you create a Table of Contents (TOC) in long content, your content is divided into sub sections. In which each section tells its specific topic. This helps a lot in SEO and also increases the chances of increasing traffic to your website.
  3. Google Search Engine also ranks Heading and Subheading.
  4. Along with this, TOC can prevent the bounce rate of your post from increasing.
  5. Makes it easier for readers to read your articles.
  6. An overview of its structure makes your articles more engaging and professional thereby increasing readers' confidence in your website.
  7. Apart from this, when you put Google AdSense on your website, it also helps in increasing the CTR.

Tutorial for adding Table of Content (TOC) in Blogger Blog Posts.

If you do not have much knowledge about HTML then you do not need to worry much about it. You can easily add a table of contents by following these steps given by me. But you have to take special care of one thing that you must keep a backup of your Blogger Template so that if there is any problem in future, you can start again from that backup. So let's start with how to add a table of contents (TOC) in Blogger Blog Posts: 

Step 1 : 

In this, first you have to go to your blogger and click on Theme -> Customize.



Step 2 : 

After that you have to select the advanced menu and click on add css as you see in the image.

 

Step 3: 

Copy the below CSS as you need to add it to the theme of your Blog.

/* Starting of TOC Css Codes */
.mb-toc {
 border: 2px solid #ddd;
 background: #ececec;
 padding: 5px 10px 10px;
 margin: 15px 0;
 font-size: 18px;
 overflow: hidden;
 border-radius: 5px;
}
.mb-toc h2 {
 margin: 10px 20px;
 font-size: 25px;
}
.mb-toc ul {
 margin: 0;
 list-style: none;
 float: left;
 width: 100%;
}
.mb-toc ul ul li a {
 padding-left: 45px;
}
.mb-toc ul ul li {
 background: none;
}
.mb-toc li {padding-left: 10px !important;
 list-style-type: none;
 position: relative;
 margin: 0;
 cursor: pointer;
 background: #f7f7f7;
 float: left;
 width: 90%;
}
.mb-toc li:nth-child(odd) {
 overflow: hidden;
 clear: both;
}
.mb-toc li:nth-child(odd) li:nth-child(odd) {
 background: none;
}
.mb-toc li:nth-child(even) {
 overflow: hidden;
 clear: both;
}
.mb-toc li:nth-child(even) li:nth-child(odd) {
 background: none;
}
.mb-toc ul>li:hover>a {
 background: #fffcd1;
}
.mb-toc li a {
 color: inherit;
 padding: 8px 0 8px 10px;
 border-bottom: 1px solid #ddd;
 width: 100%;
text-decoration: none;
}
/* Ending of TOC css Code */

Step 4 : 

Now add the above-copied CSS to Add CSS section. See the step 2 in the above pictures.

Step 5 : 

Now you are done with the CSS part and now you need to add the table of contents HTML to it to be displayed anywhere. You need to copy/paste below code in your blog posts and pages every time you want to display the table of contents. 

<div id=”toc” class=”mb-toc”>
 <h2>Table Of Contents</h2>
 <ul>
        <li><a href=”#headingid1″>1. Your heading text </a></li>
        <li><a href=”#headingid2″>2. Your heading text</a></li>
        <li><a href=”#headingid3″>3. Your heading text</a></li>
<li><a href=”#headingid4″>4. Your heading text</a></li>
        <li><a href=”#headingid5″>5. Your heading text</a></li>
</ul>
</div>

Step 6: 

Now go to the HTML section of your post and wherever you want to place the Table of Contents, copy and paste the code given below. Most bloggers recommend it right above the first title of your post so that your readers know at the beginning of the article whether it is their work or not.


Step 7: 

Now you have to add a unique ID to your heading tags in your blog post (where you pasted the HTML of the TOC).

Step 8: 

After adding the unique id to your heading tags replace the id in Html codes and change the anchor text.

After doing this step you have to publish your blog post. After this you will get to see its result. Where you will find that your Table of Contents has been successfully added. Now your visitors can easily reach any of your topics.


Tags:

Post a Comment

Previous Post Next Post