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

Providing a table of contents helps preview and prioritize content when writing lengthier articles. But not every platform makes it easy to add one. How can we implement one when we lack first-class tooling?

Why is this helpful?

Providing a table of contents helps improve the experience that the people reading your article will have.

It gives readers a preview of the article

Jumping into an article, at least a lengthy one, can be a big-time commitment. No one wants to spend 20 minutes of their morning only to figure out a post they dove into hasn’t actually answered their questions. Or that it's a rehash of something they’re already an expert on (although differing perspectives can still be helpful).

By providing this preview, you can help people get a sense of what to expect as they start to read. It allows them to prioritize their time with the other list of articles they have to read.

It provides anchor points to jump down to specific content

Similar to providing a preview, maybe someone wants to read a specific portion of the page. Maybe it’s because they can skip the first few bits of a tutorial or they are coming in from a link a coworker shared in Slack.

The point is, people can use the table of contents to jump down to the parts that are more important to them.

Bonus: it helps you as an author

Providing a table of contents might not help for many practical reasons, but it's an additional tool for you to prioritize and understand the content of your post. It serves as a high-level outline that you can refer to when making sure the flow of your story actually makes sense.

What it doesn’t do

Unfortunately, this is a manual process. This table of contents isn’t going to magically update any time you tweak your content. So make sure to be vigilant during the editing process and update any broken links or add and remove any changes before you publish.

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 Alert-Tv.blogspot, 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 a Blogger blog post.

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

Table of Contents

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

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

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

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

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

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

    </div>

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.

Popular Posts