How to add a Table of Content in Blogger ( ब्लॉगर में टेबल ऑफ़ कंटेंट कैसे शो कराये )

 

Here is How to Automatically Create Table of Contents in Blogger

I am going to divide the workflow of making a TOC into 5 easy steps so it will become super easy for you to implement.

Step 1: Now, the first thing you need to do is Login to your Blogger dashboard and then go to the Theme editor. 
And click on the Edit Html button. 
Blogger Dashboard >> Theme >> Edit Html 



It will bring you lots of codes on your screen.
Here, you have to paste the codes given below
Just above the close heading tag </head>

<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[           
//*************TOC plugin by MyBloggerTricks.com           
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 2: In this step, we are going to style our table of content. 
To do that you need to paste these CSS codes 
Find the ]]</b:skin> in your screen and paste the CSS codes 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 3: Here you just have to tweak a line or two of code in blogger theme. Search for the code <data:post.body/>  and replace it with the code given below. 
If you find more than one <data:post.body/> then replace all with the codes given below.

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

Step 4: Now, In this step, we are going to activate the TOC in our blog posts. 
It is quite simple and easy to do. 
First thing you need to do is paste the Html code given below in the blog post, where you want to show the table of content.  
I will recommend you to paste the code after the first paragraph of your blog post. 

<div class="mbtTOC"> 
    <button onclick="mbtToggle()">इस पोस्ट में क्या है देखे</button> 
    <ol id="mbtTOC"></ol> 
</div>

Step 5: And this is the last step here, you need to paste this JS code at the very bottom of the blog post or page where you want to display the table of content. 

<script>mbtTOC();</script>

That’s it you are done!
You have successfully created an automated toc for your blog post.

Note:- This project has developed by gyanikida.co.in so big shout out for them.
But keep in mind that this table of content has only made with XML and Javascript codes, so it can make your blog too heavy to load. 
And it is also not stylish to look… 

But don’t worry, I will help you to create easy to load and stylish TOC with only HTML and CSS.

How to add a Table of Content in Blogger with HTML and CSS

It can be an easy task to create Toc in Html and CSS for a web developer but it can not be an easy task for a non-techy person.
But here, I will you show you step by step method which will be comfortable for both techy and non-techy person.
Here is the deal

In this method, we will be going to establish this design.

Step 1:- In this step, you have to copy all the CSS codes given below and paste it into the root of your blogger theme. 

/* Starting of TOC Css Codes */
.mb-toc {
    border: 2px solid #ddd;
    background: #ececec;
    padding: 5px 20px 20px;
    margin: 40px 0;
    font-size: 18px;
    overflow: hidden;
    border-radius: 5px;
}

.mb-toc h2 {
    margin: 10px 20px;
    font-size: 30px;
}

.mb-toc ul {
    margin: 0;
    list-style: none;
    float: left;
    width: 100%;
}

.mb-toc ul ul li a {
    padding-left: 45px;
}

.mb-toc ul ul li {
    background: none;
}

.mb-toc li {
    list-style-type: none;
    position: relative;
    margin: 0;
    cursor: pointer;
    background: #f7f7f7;
    float: left;
    width: 100%;
}

.mb-toc li:nth-child(odd) {
    background: #fff !important;
    overflow: hidden;
    clear: both;
}

.mb-toc li:nth-child(odd) li:nth-child(odd) {
    background: none;
}

.mb-toc li:nth-child(even) {
    background: #f7f7f7 !important;
    overflow: hidden;
    clear: both;
}

.mb-toc li:nth-child(even) li:nth-child(odd) {
    background: none;
}

.mb-toc ul>li:hover>a {
    background: #fffcd1;
}

.mb-toc li a {
    color: inherit;
    padding: 8px 0 8px 25px;
    float: left;
    border-bottom: 1px solid #ddd;
    width: 100%;
	text-decoration: none;
}
/* Ending of TOC css Code */ 

Step 2:- To paste the CSS codes, open the dashboard of your blogger blog then go to Layout and then Theme Designer…
Dashboard >> Layout >> Theme Designer 


And then in theme designer click to Advanced and go to Add CSS
Advanced >> Add CSS 


Now paste all the CSS codes here

Step 3:- In this step, you have to paste the HTML codes given below to your blog pages and posts. You need to paste this code in your blog post and page every time you want to display Table of Content. 

<div id="toc" class="mb-toc">
 <h2>Table Of Contents</h2>
 <ul>
        <li><a href="#headingid1">1. Your heading text </a></li>
        <li><a href="#headingid2">2. Your heading text</a></li>
        <li><a href="#headingid3">3. Your heading text</a></li>
	<li><a href="#headingid4">4. Your heading text</a></li>
        <li><a href="#headingid5">5. Your heading text</a></li>
</ul>
</div>

Step 4:- Now you have to add a unique Id to your heading tags in your blog post.

Step 5:-  After adding the unique id to your heading tags replace the Id in Html codes and change the anchor text.

Boom!
You have successfully created a stylish looking and easy to load table of contents for your blog.