HOW TO SET INTRODUCTION TABLE OR TABLE OF CONTENTS IN A BLOG IN BLOGGER.

Do you wanna know how to insert a table of contents box in a blog?

You can successfully fix a table of content in less than 20 minutes. [for the first time I take up to 20 minutes then consecutive process only takes 2 minutes.]

Then you are in the right place. Go through the procedure line by line [step by step] You will get what you are here. 

Every WordPress bloggers have many plugins for Every function and feature.

Go to themes.

Click edit HTML.

Press ctrl+f. Then search </head>.

You can find ahead in the first line itself or in the first part but that's not what we are searching for.

You can see a second head at row around 3000 maybe it differs. You have to paste the FIRST CODE above the head tag.

FIRST CODE:

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

After pasting the first code save it.

SECOND CODE:

Now-Again Press ctrl+f, then search For the below code. That is copy the below code and paste on the search box. There you can find this code on the HTML SCRIPT.

]]></b:skin>







Above this code on the HTML script press enter and paste the THIRD CODE ABOVE THE SECOUND CODE.




FOR EXAMPLE:

BLANK SPACE1

BLANK SPACE 2

]]></B:SKIN>







At first there will be only one blank space on it. You have to place the curser on blank space 1 and press enter. now you have created blanck space 2. Now paste the third code on blank space 2 then save it.

THIRD CODE:

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

FOURTH CODE:

<data:post.body/>

Press ctrl+f.

Now copy the fourth code and paste on the search box and press enter. It searches and shows you the respective code on that script. [That is Search for this code in HTML].

Then you have to replace this FOURTH CODE with The FIFTH CODE. [You have to erase this FOURTH CODE AND PASTE FIFTH CODE in the same place.]

There may be more than one [ <data:post.body/>] of this code then you have to change all these sets of codes with the FIFTH CODE is available below this line.

Maximum I think there may be 3 of these same tasks.

NOTE:

FIFTH CODE:

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

After replacing FIFTH CODE in place of FOURTH CODE. Then save the theme. That's all we have to do Here.

SIXTH CODE:

This 6th and 7th codes are to be used for every blog post individually.

Now go to a post option on the left-hand side. Click any one of the posts where you have to insert TABLE OF CONTENT.

NOTE:

Firstly, give an h2 tag to all the heading in that blog. 

[Instrutions for beginners]

{next option to the font size you can see an option click that to give h2 [Heading tag] tag for all your headings}

Then now change the blog to HTML view.

{First option in settings in the top row.}

Then click the Format HTML option that will be on the top row setting.

Paste this below code in a place above this line <p2>

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

    </div>

FOR EXAMPLE, I pasted this link in this post above FIRST CODE [This is my first heading].

See a look of it below i have mentioned actual place for pasting this code.You have to paste the code above <h2 style="text-align: left;"> this and below </p> this.

</p>

I pasted sixth code here.

<h2 style="text-align: left;">

  <span style="font-family: georgia; font-size: small;">FIRST CODE:</span>

This is how I pasted.

SEVENTH CODE: 

Then paste the last code at the end of the HTML script. That is at the last line of it.

<script>mbtTOC();</script>

Then save it. You can see a table of contents in your post.

If you have any doubts please comment in the comment section we are there to help you.

CONCLUSION:

Guys table of content makes good navigation for readers. This is part of a good article. Every professional article will have a table of contents.

If you have any other type of table of content designs share with each other in the comment section.