Easiest Way How to add a table of contents on Blogger & WordPress

How to add table of contents in blogger

Table Of Content In Blogging, How to add a table of contents on blogger, Add Automatic Table Of Content In Your Website, Best Table Of Content Plugin In 2021, Structure Of Table Of Content,

If you are a blogger and have started working a little according to your choice related to blogs and content then probably know you are looking forward to getting the answer of How to add table of contents in Blogger and various other ways by which you can make your blog more appealing and engaging to the visitors.

And you are on the right track. Good quality content is a must for the prosperity in blogging, but you need to take care of a lot of other factors too with time as well as integrate those to your functionality so that you are not lagging behind any aspects.

Adding a table of contents in a blogger blog post helps you to better structure the blog post in a much user-friendly way. And helps readers to get the things as per their query in a much easier way.

A table of content always makes things easy for the reader to read the post, and the most fundamental example for the table of content examples is that you can just note down the main points or subheadings which you have described in the blog.

Also Read: How To Remove Date From Blogger Post URL

Actually how to add table of contents in blogger is a question asked by the people who use blogger as their blogging platform, but this question becomes slightly less significant for the people who mainly use other platforms for blogging like WordPress.

The main reason for asking the question for the table of contents is basically because Blogger doesn’t provide you any such tool or option to add a table of contents example as a whole to the blog, and doesn’t have any such plugins as WordPress too.

However, one can do the things done by creating a table of contents with writing some bit of codes and some handful customization.

What coding for adding a table of contents example!!  I don’t know anything about coding. So how can I do that?– these are the questions that immediately pop up in your mind but don’t worry you don’t need to understand the coding for doing that.

In this blog, we are going to discuss all sorts of possible things that you may need in the most simplified way so that you can get your query resolved in the least amount of effort as well as with not having any kind of stress.

With our help, you can easily create a lightweight table of contents for your blog post as per your wish with the basic simple HTML lines of codes. So, it will not affect your site loading speed at all.

So, without any further delay, let’s directly jump towards developing the basic understanding of concepts which will help you to get a better clarity towards this matter overall.

What is an automatic table of contents:

An Automatic Table of Content is actually a table of contents in a blog, but the main feature of it is that it automatically arrange all the headings and subheadings tags from your blog post and arrange them in a point-wise hierarchical format.

In the automatic table of contents examples you actually don’t need to place the headings in those table of contents rather as it works automatically, it gives a pleasant table to your audience to navigate to that particular section.

Also Read: Google AdSense approval trick

Does Table of contents improve User Experience:

User Experience always plays a very crucial role in getting success for your blog, but the irony is that most bloggers tend to focus more on content but don’t give enough attention to user experience.

And here it can be supported by another observation that for generating more views you need to have worked upon SEO and one of the most fundamental points for appearing at the top of SERP is basically user experience and engagement.

Research suggests that more than  70% of the viewers first like to see the table of contents so that they first get the understanding of whether this blog covers their query or not, if yes then they tend to read only that portion not the full by navigating to that.

So, to avoid the bounce rate of your blog as well as improving user engagement by the table of contents examples is very essential, and thus it further leads us to the question of How to add table of contents in blogger?

Advantages of having a proper table of Contents:

You must be well aware by observing that generally table of contents appears just below giving a brief description about the topic and then involved into the main aspects.

Thus, a well-structured table of contents examples can really serve multiple purposes as per the requirements and sometimes more holistically:

  1. Table of contents help you to arrange the points of your post or article in a systematic way.
  2. Table of contents always provide a much more professional look to your article
  3. It also helps to give a direction as per the viewer’s need and expectations, as it involves a short structured point related to the covered aspects in the article
  4. A good table of contents examples, a well directed roadmap for your targeted audience to navigate as per their demand.
  5. It also helps you when you wish to update or try to make any changes to the blog content in a much more systematic way.

Table of Contents Examples and SEO: 

Many of you can think that the Table of contents may not be as relevant as an SEO factor so, we may not consider this in our blog writing practice. But actually, it plays a very significant role there too.

The main benefit of having a full-fledged table of contents is that it always divides your article into a few subsections, which covers some key aspects there only.

Thus, generally, your blog focuses on covering more aspects and the blog becomes longer. Google or other search engines mainly promotes longer blogs covering more aspects as per user’s demand, including a good audience engagement.

Table of content always serves best in all of these factors and one additional thing which happens is that the Table of contents also help you to get indexed and appear in the SERP for that particular sub-topic covered in the blog.

Not only that, but it also increases the Click-through-rate (CTR) of your websites and decreases the bounce rate by having a good audience engagement.

Main features of a table of contents in blogger as a plugin:

There are many features that are inherent under this table of contents examples, and you should know these things before considering that as a plugin in your blog:

  1. This site plugin is mainly designed with basic HTML, JavaScript and CSS.
  2. It is made in such a way that it basically a lightweight so that it won’t affect the loading speed.
  3. The plugin is SEO friendly and will help you to rank under the SERP.
  4. The best table of content plugin is basically customizable and responsible.
  5. A well-structured table of contents examples help visitors to better navigate as per their own need and interest.

Add table of contents in blogger:

Now after getting so many details related to what actually a table of contents represents, and what is the table of contents examples along with why you should consider adding a table of contents on blogger now it’s time to get the step-by-step process to answer How to add table of contents in blogger?

But before a bit of caution note that this process involves a bit of coding and so you have to really work with utmost attention so that you don’t do any steps wrong otherwise it will unnecessarily cause many troubles on the page of that blog.

Also, Read This Post: Google AdSense Alternatives

So, without any further delay, let’s explore the step-by-step guide for adding a table of contents in a blogger.

Step-1:  At first you need to log in to your blogger blog in which you want to add a table of contents. Then after going to that you have to click on the theme option

Step-2: Now after clicking the theme option you have to choose the customize option appearing on the screen in an orange box.

Step-3:  From to customize option-click the drop-down menu and then select the “Edit HTML” option over there.

After clicking on the “Edit HTML” tab, you will see a page with a lot of HTML codes that will appear on the screen like below.

Step-4: Now all you need to search </head> from that screen manually or can also find that by typing on the search bar by pressing Ctrl + F.

The </head> tag will appear somewhere over there, which is shown in the image below.

Step-5: Now you have to paste the following code written here just before the </head> tag.

Code:

<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-6: Now search for ]]></b:skin>and paste the code mentioned below just above the ]]></b:skin> line.

Code:

.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-7: Now your job is almost at the end. You have to search for  <data:post.body/>, and then have to replace it with the following mentioned code below.

N.B. – There may be more than 1 <data:post.body/> tag mentioned over there in the codes, you have to replace all of them with that.

Code:

<div id="post-toc"><data:post.body/></div>

Step-8: Now when you write any post, at this point, you have to click on HTML view and have to paste the given code. It is for where you want to show the table of contents – basically the place to show your table of contents in the blogger blog post.

Code:

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Table Of Contents</button> 
    <ul id="mbtTOC"></ul> 

    </div>

And now to complete the last step you need to add the code mentioned below just below the </div> tag, you have written by posting the above code.

Code:

<script>mbtTOC();</script>

Bingo! Now you will be able to see the table of contents example in your blogger blog post. But you need to have paste or have to go with the same process of adding the two codes mentioned in the last step on every page or post where you wish to show the table of contents in blogger.

If you want to do more changes regarding the color, elements, text editing then you can also perform all of those by just doing some changes in that code.

All you need to do for that is, you have to find the default style and color of these all code and there onwards you can easily change as per your choice.

Here we are mentioning some attributes so that you can get the whole idea:

  • Background color – #FFFFEO
  • Font – #FF6589
  • Border color – #f7f0b8
  • Font color – #707037
  • Anchor link color – #0080FF
  • Font size of anchor links – 16px
  • Font size of table of contents heading text – 25px

You can get the codes for HTML colors from here for better purpose of use: (HTML COLOR CODE)

Now, if you have followed all the steps as stated in this blog appropriately, then you can get a preview of your blog post with the table of contents.

Thus, you can check that and get more clarity towards the successful operation of the question regarding how to add table of contents in blogger.

Best Table of Content Plugin WordPress:

There are many WordPress plugins present over there, and you can just go with any of those for serving that purpose.

We will recommend the Easy table of contents as we are also using that for quite a long time, and it serves most of our purposes. For installing that you need to have a search on WordPress plugin library with “Easy table of contents” and then you just need to install that.

Best Table of contents plugin WordPress
Table of contents plugin WordPress

This free plugin automatically generates a table of contents for your posts, blogs, pages by parsing the contents and extracting the headers for that. You can further customize that as per your wish based upon going with several options to configure it according to display, coloring, and font size customization features.

Final Word:

So, this was the complete overview regarding all sorts of possible queries related to How to add table of contents in blogger along with a step-by-step guide using proper screenshots for better understanding.

Besides that you also get to know much more about a table of components and its key components as well, not only that we have also discussed how it can really affect the SEO in a better way with a table of contents example.

Share on:

Hi, I'm Soumitra Sardar, founder of OnBline. OnBline Blogs always tries to convey the most essential and trending aspects of Digital Marketing which are or will be the new normal in present day or in the upcoming future days in a very simplified and easy to implement manner.

Leave a Comment