How to Add Table of Content (TOC) in Blogger post

Hello friends! Today in this article we are going to talk about Add Table of Content (TOC) in Blogger post. And How to Add Table of Content (TOC) in Blogger post. We will know all these things in detail in this article. So stay with this article to know in more detail.

Friends, we will know about some things like, What is a Table of Content? What are the benefits to add a Table of Content in Post? How many types of Table of Content we add? How to add a Table of Content in a blog post? We will know completely about the Table of Content (TOC).

What is the Table of Content (TOC)?

Friends, you will see any book where you can see initially one or two pages of table of content where you can see page number and topics of the overall book. So, you can easily find your topic with the help of this Table of Content.


We can also add a similar table of content in the Blogger post. We can use some HTML/JS/CSS code to create this table of content. But in WordPress, you can install plugins to add Table of Content in Blog Post.

How many types of Table of Content?

You can add two types of Table of Content in blogger.

1) Automatic Table of Content:

For Automatic Table of Content, you have 3 or 4 types of HTML and CSS coding. You have added these codes in the Blogger Template HTML Section of your Blog. And also some code will be added to the Blog Post HTML section. The automatic Table of Content can also be hidden or unhide. 

If you use the code of an automatic Table of Content in your Blogger Blog, then you will face some problems because the code of Automatic Table of Content and the code of your blogger blog does not match with each other, or sometimes your blog is not able to support the code of Automatic Table of Content. But if you have good knowledge about HTML/CSS and JS then you will not face any issue.

2) Manually:

In Manually Table of Content, you have to add the code of table of content in every blog post HTML section. 


Benefits of Table of Content in Blogger:

1) Using a Table of content visitors get a good experience with your blog, Visitors spend much more time in your post. It helps you in reducing the blog bounce rate.

2) Table of Content improves the Search Engine Optimization (SEO) of your blog post. Which is helpful for you to rank in search engines.

3) By using a Table of Content, your Blog looking much professional.

4) With the help of a Table of Content users of your Blog can get all the information about the post.

How to Add an automatic table of contents in Blogger

  • Go to Blogger Dashboard
  • Click on Theme Section
  • Now click on Customize and then click on Edit HTML
  • Now Press Ctrl+F, you will see a search bar
  • Copy the code ]]></b:skin>, paste on search bar and press Enter
  • Copy the below code

.mbtTOC{border:5px solid #f7f0b8;   
 box-shadow:1px 1px 0 #EDE396;   
 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;   
 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;}

  • Paste this code on the above of ]]></b:skin>
  • Now again press Ctrl+F and search for </head>
  • Copy below JavaScript code and paste it above to the </head>

<script type='text/javascript'>              
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';}}           

  • Now again press Ctrl+F and search for <data:post.body/> 
  • Replace this code with the below code.

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

  • You will find this code 1 or more than 1 time in your blog.

How to add TOC in Blogger Post?

  • Click on the Post section and Create a New Post 
  • Start to write an article and write the heading of your Blog Post
  • Click on the pencil icon on the top left side 
  • Now click on HTML View
  • Copy the below code and paste here
<div class="mbtTOC">
<button onclick="mbtToggle()">Contents</button>
    <br />
<ol id="mbtTOC"></ol>

  • When you write a complete Post then again go to HTML View 
  • Paste the below code at the End


Now you will create successfully a Table of Content in your Blog Post.


Did you like this How to Add Table of Content (TOC) in Blogger post? You must definitely give us your feedback in the comment box below. If you also want to give us any kind of Suggestion, then share your opinion with us in the Comment Box.

Post a Comment

Please do not enter any spam link in the comment box.