How To Add Table Of Content in Blogger (2 Methods with Screenshot)

Disclosure! My posts may contain affiliate links, which means that, if you choose to make a purchase, I may earn a small commission at no extra cost to you. I greatly appreciate your support! Learn more

Add a Table Of Content In Blogger blog post to simplify your post structure and user-friendy. Table of Content in Blogger blog post makes it easy to read the post for the reader.

Hello, welcome to Roseblogging, in this article I will show you how to add a table of content in Blogger. Adding a table of content in WordPress is very easy using some plugin. But it’s very difficult to add a table of content in Blogger as Blogger does not support Plugin.

Here, Today I will guide you step by step to add a table of content in Blogger. Before adding this to your blog you should know some benefits of having a table of content (TOC) in Blogger blog post.

Also Read-: How To Remove Date From Blogger Post URL

SEO Benefits of Table Of Content (TOC)

Google always loves well detailed and well-structured blog posts and pages. And by adding a table of content in Blogger blog posts, you make your blog post well structured and user-friendly. add a table of content in blogger to get a better result.

And if you add a TOC in your blog post, it will be structured and reader-friendly. Google may display jump to links in the Search Result Page, it’s very beneficial for webmasters and it can increase your CTR.

Improve User Experience

According to research by NN Group, more than 79% of total web readers are scanners who only read the important points of a webpage. We also love to read well-detailed articles.

User experience is a very important thing to get higher ranking in SERP (Search Result Page). User experience is a very important part of a blog to rank faster. And a table of content will help you to improve the user experience of your blog.

Adding a TOC in Blogger will allow the readers to jump to the important parts of a blog post. It will be easy for a reader to understand the content.

Also Read: How To Start A Blog in 2021 From Scratch

Method 1: By adding Script in Template & Post

I will guide you step by step to add a table of contents in Blogger. I have explained this process to 6 simple steps.

Step 1-: First login to your Blogger Blog in which you want to add a table of contents (TOC). Click on Theme and then click on edit HTML. (as shown in the screenshot).

How To change theme on Blogger

Step 2:- Find </head> in the HTML file and paste the below-given code just above the </head> tag as shown on screenshot.

Add script in Blogger template

copy and paste this script just before the </head> tag on your Blogger template.

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>           

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>


<script type='text/javascript'>              

//<![CDATA[                      

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 3:– Find ]]></b:skin> code in your Blogger template and paste the below-given code just above this tag. (You can see the screenshot below).

Find ]]></b:skin> in blogger template
.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 4:– It’s a very easy step. Find <data:post.body/> code in your theme and replace with a new code given below. If your theme has this code more than one time then you have to replace all of them with this new code.

Replace script in blogger template
<div id="post-toc"><data:post.body/></div>

Step 5:– Click on HTML view and paste the below given code where you want to show table of content in Blogger post.

HTML view of Blogger post
<div class="mbtTOC"> 
    <button onclick="mbtToggle()">Table Of Contents</button> 
    <ul id="mbtTOC"></ul> 

    </div>
Add table of content in blogger

and add this code below text, as you can see in the screenshot.

<script>mbtTOC();</script>

Boom, Now you can see a Table of Content in Blogger post. You have to add these two code on every pages or posts where you want to show table of contents in Blogger.

You can choose where you want to show the table of content, before first heading or after heading, you have to just paste the script.

If you want to change the colour of any elements, then you can easily change it in simple steps. Find the default style and colour of these all code and you can change as per your choice. You can Change Font, Font Colour and Font Style.

  • Change background color #FFFFEO
  • Change font
  • Change border color #f7f0b8
  • Change font color #707037
  • Change Anchor link color #0080FF
  • Change the font size of anchor Links 15px
  • Change the font size of TOC heading text 20px
  • Know HTML code of colour here https://htmlcolorcodes.com/

Check if you followed all the steps correctly. You can preview your blog post, Either the table of contents in Blogger is showing or not. If you face any issues, please take help of this video.

If you change your Blogger template then you have follow these steps again to keep table of content in Blogger.

Method 2: Manually Add table of content in Blogger

You can also add a table of content Blogger post manually without using any script. Adding a table of contents in Blogger manually is a very easy task and I will share a step by step guide here. Just follow this simple method to add a normal table of content in Blogger post & page. But please remember if you add a TOC in Blogger manually you can’t change the style of that TOC in Blogger. To add table of content in blogger manually you don’t need to add any script to your Theme, And if you change the theme of your Blogger blog it will not affect your TOC in blogger (it will remain unchanged).

Thank you for reading this blog post, I hope this helped you to add table of content in Blogger. Please do share this on your social media. Connect with us on Facebook, Telegram for regular updates on Blogging, Affiliate marketing and more online money making tips.

Hey, I am Keshab Chandra Behera an Indian Blogger, Affiliate Marketer and YouTube Personality based in Bhubaneswar, Odisha, India.

3 thoughts on “How To Add Table Of Content in Blogger (2 Methods with Screenshot)”

Leave a Comment