How to add a Table of Content in Blogger

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.

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.

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

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

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

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

    </div>

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/

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 h2, h3, 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.

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.

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

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.