How To Add Table Of Contents In Blogger?

Step by step guide for adding table of contents in Blogger

 Now you know what is Table Of Contents,

Table of contents for blogger post

How to create table of contents for Blogger

Adding table of contents in Blogger using widgets

Table of contents plugin for Blogger

Adding table of contents in Blogger post

Adding table of contents in Blogger using plugins

 what are the benefits you will get by adding it. Now I will tell you how to make table of content on blogger, whatever work will be done in it will be mostly in HTML section only.You must be well aware that you will find many Plugins to add Table Of Contents on WordPress, but HTML is the best way to add Table Of Contents on Blogger.If you do not have much knowledge about HTML, then you do not have to worry much about it. You can easily add Table Of Contents by following these steps mentioned by me.

But you have to take special care of one thing that you must keep a backup of your Blogger Template so that if there is any problem in future then you can start again from that backup. Adding table of contents in Blogger using plugins

 So let's start How To Add Table Of Contents In Blogger:

Step1. Login Into Blogger.com

In this, first of all you have to go to your blogger and click on Theme there.

After that you have to click on Edit HTML of your template 

Step 2. Search </head> tag

In this step, after going to Edit HTML of the template, you will see some codes like this. You have to click anywhere on these codes and then search </head> by pressing Ctrl + F. You will find </head> in yellow color. After that, you have to paste the code given below at the right of the </head> tag, but then save it by clicking on the save button.

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

In this step you have to search for ]]></b:skin>  Once you have found the ]]></b:skin> code, you have to paste the below CSS code just above the ]]></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;}

Step 4. Search For <data:post.body/>

In this step also you have to do the same process. First of all, you have to search <data:post.body/> then after getting <data:post.body/> replace it with the codes given below and save it.

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

*After doing this your work ends here.*

How To Show Table Of Contents In Blogger Post

Now I will tell you how it will appear in Table Of Contents In Blogger Post. For that it is very important to save the codes that you have received from template HTML because you can put these codes anywhere in your blog post according to your own like anywhere before or after Heading tag H2. Now follow the steps mentioned below:

Step 1. Choose TOC Box Location

To add table of contents on Blogger, first you have to choose its location. By the way, if you want, you can choose any location according to yourself, but the best location for TOC is before the <h2> tag. At this place the attention of the users goes first.

To add TOC, go to your blog post and switch your post to HTML.

After that, paste the code provided by my article under the <h2> tag like this.

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

    </div>

Step 2. Add This Code

This step is the last step to add table of contents on blogger. In this step, you have to add the below code to the last in the blog post. 

<script>mbtTOC();</script>

After doing this step, you have to publish your blog post. After this you will get to see its result. Where you will find that your Table Of Contents has been successfully added. Now your visitors can easily access any of your topics.

How To Add Table Of Contents In Blogger (In Hindi)

Friends Table Of Contents is very important for any website, whether it is Blogger or WordPress.
TOC will tell your visitors where the topic of their work is in the article so that they can reach their topic without wasting time. Along with this, it also helps Google's web crawler to crawl your post better.
If your blog post is short then you do not need to add Table Of Contents, but if your content is lengthy then you must add Table Of Contents to the post.
According to the researchers, more than 79% of the total web readers read only the important information in the web page, and if you think of yourself in the place of those readers, then you would also read only the important points in a web page. Will be
By looking at this result, you can guess how important Table Of Contents is. It not only improves the user experience but it also helps in SEO.
In the above article you have come to know what is Table Of Contents, How To Add Table Of Contents In Blogger, its benefits etc. With this, I hope that this article of mine will be of use to you.

Q1. How to do Customization of Table Of Contents?

Most bloggers are such that they do not know how to change the color of font, background color, headline etc. in the Table Of Content box. I would like to tell them that you can do the customization of Table Of Contents very easily according to your own. You will have to change some codes in the ]]></b:skin> that I have provided. Just then you can give your Table Of Contents look as you want. To change the codes, please follow the points mentioned below:

To change the font size of Headline text of Table Of Contents, you edit 20px

To change the font size of Anchor links of Table Of Contents, you edit 15px

To change the background color of the Table Of Contents box, edit #FFFFE0

Edit to change Border Color #EE5535

Edit to change anchor link color #0080ff

And finally, to change the font color of Headline text of Table Of Contents, edit #707037

Q2. How to arrange headings in Table Of Contents?

To arrange the headings in the Table of Contents, you have to first write the title of your post in chronological order on the research paper. After that you have to write subtitles or subheadings. Then you have to write page numbers for headings and subheadings.

Q3. What is Automatic Table Of Contents?

Automatic Table Of Contents allows you to organize all headings and subheadings tags of your blog post without manually changing.

tags:-

blog table of contents examples
html table of contents
best table of content plugin
html table of contents links
website table of contents
how to add table in blogger
how to make a table of contents on blogger
how to add automatic table of contents in google blogger
box html code for blogger
html dynamic table of contents

how to create a table of contents
table of contents generator
table of contents plugin
dynamic table of contents 

automatic table of contents
HTML table of contents
WordPress table of contents
Blogger table of contents
Joomla table of contents
table of contents for long articles

Go to Link