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

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).

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

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).

.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