How to Show a Table of Content in a Blogger Post 2022

5/5 - (8 votes)

Are you looking for how to add TOC in blogger.com. Step by step guide on how to show a table of content in a blogger post.

Adding tables of content in the blogger or blogspot post is the major problem for Blogger users because Blogger.com doesn’t allow adding TOC directly in the blog post. Also, you can’t add external plugins like WordPress. 

If you want to show a table of content in your blogspot post, then you’ve to add some code to your blogger template. You can do it easily if you’ve knowledge about coding. But, if you don’t have coding knowledge then don’t worry. 

Today, in this article, we’re going to show you the step by step process on how to add tables of content in a blogger post. I’ll provide you some code, you have to simply add these codes into your blogger template.

So, without any further delay, let’s get started.

How to Add Table of Content in Blogger Post

First Process:

Step by step guide on how to show TOC in a blogger post. 

1. Go to your blogger dashboard or login into your blogger account.

2. Navigate to the “Theme” option from the left menu and click on it. 

3. Click the little downward arrow of the “Customize” theme and then “Edit HTML” (as shown in the below picture).

how to show a table of content in a blogger post
Navigate Edit HTML

4. Now, you’ve to find the closing </head> tag (press CTRL + F key from your keyboard and type </head>)

blogger head tag
Find </head> Tag

5. Copy the script code and paste it before the closing </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>

6. Again find the ]]></b:skin> tag and copy the below CSS code and paste it just before the ]]></b:skin>  code(as shown in figure).

paste css code
Paste CSS Code before ]]></b:skin> 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}

7. Lastly, 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>

Finally, the coding part has been done. Now, if you want to show the table of content in your blogger post then you’ve to add some more code into your post editor which is discussed below.


How to Show Table of Content in Blogger Post

Second Process:

In the first process, we’ve added some code to our blogger template. Now, it’s time to add some HTML code to our post editor. After doing this process, a table of content will be generated automatically in blogspot posts.

Follow the following step to show a table of content in a blogger post. 

1. Click “New post” or edit your existing published post (if you want to show TOC).

2. Switch post editor into HTML view.

3. Copy the below HTML code and paste it before the first heading tag or after the first paragraph.

<div class="mbtTOC">
   <button onclick="mbtToggle()">Contents</button>
   <ol id="mbtTOC"></ol>
   </div>

4. Publish your post. It’s done!


About Table of Content

A table of content is an organized piece of content which shows how many topics (headings or subheadings) are included inside the one article. With the help of TOC, we can directly jump to that section which we want to read. 

Adding a table of content before the first heading or after the first paragraph is the best practice for user experience. 

Advantage of Using TOC in a Blogger post

There are following benefits of using a table of content in a blogger post:

  • It helps to Improve user experience.
  • Present systematic content to the users.
  • Makes it easier to navigate headings and subheadings of the content.
  • Increase CTR from search.
  • It also helps to Improve your SEO.

Final Thought

I hope this article helped you show a table of content in a blogger post. This is the easiest method to add TOC in a blogspot post. In order to show the table of content, it is important to add HTML code of the second process in the written article or post. If you’ll not add the second process code on your blog post then TOC will not be visible to your users. 

Just follow the above process carefully and your table of content in a blogger post problem will be resolved. If this article helped you then share it with your blogger friends.


FAQs

Is it possible to add a TOC plugin in Blogger.com?

No! Blogger.com does not allow you to add external plugins like WordPress. If you want to add a table of content in a blogger post then you have to add some code in your blogger template.

How to Show table of content in blogger posts?

To show a table of content in a blogger post, you’ve to add some code in your template.

Adding a table of content in a blogspot post is the best practice?

Yes! If you include a table of content in your blog post then increase the user experience.

Should we add TOC in all the posts?

I recommend you to use a table of content in that blog post which is too long (more than 2000 words).

What are the benefits of using TOC in blogger posts?

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

Sharing Is Caring:

A blog scientist by the mind and a passionate blogger by heart ❤️. Fountainhead of Everything In Google Blog. Life motto: All our dreams can come true, if we have the courage to pursue them.

Leave a Comment