How to add the Table of Content in Blogger Post?

 

Introduction

In this tutorial, we tell you the easy way how to add a Table of Content to your blogger Post. You must first have a Gmail account. If you do not have a Gmail account, you can easily create a Gmail account by visiting our blog How to Create a New Gmail Account. Because you will need Gmail to create a blog website.

Whenever you add a feature of any type in Blogger, you have to go to the theme editor and do the coding. Blogger does not use any plugin like WordPress. When you have to add a custom feature to it, you have to create a code for it. With this code, we can add our feature. In this post, we will show you Some are explaining how bloggers can add a table of contents to a post. Read this post carefully till the end. By reading this post you will be able to easily add the table of contents to the Blogger post.

Let’s get started and follow the steps below:

• Log in to blogspot.com with your Gmail account.
• Click THEME Left side of the blog, then show your current theme which you have already chosen on the right side.

• Click the “CUSTOMIZE” button and click the EDIT HTML, then open your theme code editor.

• Now search the </Head> in this, and pate below script/code before </Head>

<script type='text/javascript'>              
//<![CDATA[           
//*************Add to TOC plugin in Blogger Post           
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>

• Next search the]]></b:skin> in this HTML Editor, paste the following CSS/code before]] ></b:skin>

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

• Then search the <data:post:body/> and paste the below HTML code.

Note: There can be more than 1 <data:post:body/> tag, you replace of all them.

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

• At the end here, click the SAVE button of Editor, done for all.

How do show a Table of Content in a Blogger Post?

Finally, the basic step is to activate the table of content and paste the below JavaScript code after the end of your blogger post.

<script>mbtTOC();</script>

Then click the PUBLISH button top of the blog post, done for all. The Table of Content has been activated successfully.