How to add a Table of Content in Blogger

How to add a Table of Content in Blogger

If you are a blogger, then probably you know that the content is the King, and you need to make it more attractive and easier to understand by your readers. In this post,I will teach you how to add a Table of Content in Blogger blog posts so that you can make your blog posts interesting and informative for your readers.

Many people think that table of content is just for the readers. However, the table of content can also be used for great SEO benefits. The table of content helps to increase the page rank and improve the search engine results. This results in more traffic on your website. The reason behind this is that Google loves articles which has a good structure and easily understandable information.

Read also: Add Responsive Table in Blogger Post

{tocify} $title={Table of Contents} 

What is a Table of Content (TOC)?


Table of Content allows us to arrange all the heading and subheading tags from your blog post and makes it easier to navigate to your audience.

SEO Benefits of Table Of Content in Blogger


Most SEO experts know that a table of contents is useful to improve your SEO efforts. It makes it easier for Google and other search engines to crawl and index the content on your site. However, there are many other benefits to including a table of contents in your content marketing strategy.

Reasons why you should include a table of contents in your next blog post:

  • An organized outline
  • Easier for readers to navigate your content
  • Improves user experience
  • Better for mobile devices
  • Professional look for your article
  • Google may include a Jump To link in the SERP
  • Helps improve CTR
 
The Table of Content in your blog post is very useful, especially for large articles with multiple titles. 
 

How to add a Table of Content in Blogger blog post?


I will show you two methods How to add a Table of Content in Blogger, Automatic Table of Content (TOS), and Manually add Table of Content (TOS) to Blogger.

 

Follow this simple guide below to add a Table of Content to your blogger blog post.


Note: Before you apply the following steps, backup your blogger template. I've added a picture below of how to back up your blog template.

 

backup blogger template

Method 1: How to add an Automatic Table of Content in Blogger


Step 1: Click on Theme in your Blogger dashboard, then click Edit HTML

 

 

Step 2: Press CTRL + F type </head> press Enter and paste the code abowe the </head> tag as shown in the screenshot.

 

How to add an Automatic Table of Content in Blogger 1

 

<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: Press CTRL + F again, type ]]></b:skin> in the search and press Enter. Paste the code below this tag ]]></b:skin>. See screenshot below.  

 

How to add an Automatic Table of Content in Blogger 2

 

.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: Find all the <data: post.body /> codes in your theme and replace it with the new code below.

 

How to add an Automatic Table of Content in Blogger 3

 

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

 

Step 5: Click the HTML view of the blog post in my want to display the table of contents and paste the code below.

 

How to add an Automatic Table of Content in Blogger blog post

 

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

    </div>

 

How to add an Automatic Table of Content in Blogger blog post 2

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

 

<script>mbtTOC();</script>

 

Congratulations, you can now see the Table of Content in your blog post. You need to add these two codes to each blog post where you want to display a table of content in Blogger.


Also, you can easily change the color of any element, font, font color, and font style in the table of content.


  • Change background color - #FFFFEO
  • Change the border color - #f7f0b8
  • Font color change - #707037
  • Change the color of the anchor connection - #0080FF
  • Resize font - 15px
  • Change the font size of Table of Content - 20px


HTML color code can be found here - https://htmlcolorcodes.com/

 

Method 2: How to add a Table of Content in Blogger Manually

 

You can also add a table of contents on Blogger manually without the use of scripts and CSS codes. Manually adding a Table of Content in Blogger is very easy to follow this simple method to add a table of contents to your Blogger post and page. 


Step 1: Switch the post to HTML view and click HTML Format

 

Step 2: Press CTRL + F and type h2h3, etc. to search for the headings tags you want to be in your Table of Content

 

Step 3: Now add Shortcodes to you h2 heading tags id = "1"id = "2"id = "3", etc. Take a look at the screenshot below.

 

How to add a Table of Content in Blogger Manually 1

Step 4: Go back to Compose view and add # 1, # 2, # 3, etc., to all links to your Table of Content, look at the image below.

 

How to add a Table of Content in Blogger Manually 2

Congratulations, you have successfully created the Manually Table of content in your blog post. 

 

Conclusion

Using a table of content in Blogger improves the user experience, has SEO benefits, and is especially useful for large articles.

 

I hope you found this article on how to add a table of content in Blogger useful and helped you make your Blogger look more professional. If you have any questions or problems implementing the Table of Content, write in the comment section. 

Jasmin K.

SEO Blogger Tips The main goal of this site is to provide quality tutorials, tips, courses, tools, and other resources that allow anyone to work online and master digital marketing.

1 Comments

Post a Comment
Previous Post Next Post