How to Make a Table of Contents jQuery Accordion Effect

Now I do bebagai science jQuery neighbor who now banayak Bloggers who use it. Previously I also never made a post about how to create a table of contents but without jQuery. Well now if Nad interested in adding Dartar contents or site map with jQuery please follow the scarcity of the following:

How To make:

1. Login Keakun Blogger
2. Click Design
3. Click the Edit HTML Tab
4. Put the following code above the code ]]></ b: skin>
   

   # Dafis-acc {
   font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: # 333;
   background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2-oJMnagSUdplz7oIm-WewPspiVmYe7Sdc4W8YDwQl97lFTYYMxHw1zyuvUMq7wJh6GVFBm1fjhQNBNiueqNLIbKfNbSJCWUBs5m_QC0ViYqH5THVCDSDMCuMZufjqgfalkZp3yxnOho/d/bg5.gif) repeat-y scroll left center # E7F7FB;
   padding: 2px 0;
   border: 1px solid # 339DC6;
   }
   
   . Dafis-label {
   background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinZskdLSb3FPben3SeZ103MYzNwn9U-MjMprWVUMfY-_Xn3UFq-9lbEgPXUn7zyV0f_YCaRTF1vrEuZm7Dz8Eh2_VUZaknjp1W-gE7OdujrssyamYaZ9AbSvy2D7LXvUyYiwg884Pv9wA/d/bg4.gif) repeat-x scroll 0 0 # E1F4FB;
   font-weight: bold;
   line-height: 1.4em;
   overflow: hidden;
   white-space: nowrap;
   vertical-align: baseline;
   margin: 1px 3px;
   outline: none;
   cursor: pointer;
   text-decoration: none;
   padding: 2px 10px;
   color: # fff;
   text-shadow: 0 1px 1px RGBA (0,0,0, .3);
   border: 1px solid # 2F94BA;
   }
   
   . Dafis-label: hover {
   background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivLRuwlxhxEZIqA6PcxEyaoUktBkI2YxzReCQBKIV8L3bOhj17AjIVe63IJ_Vq1KxCiAZbM7weG__kMUvKgBUr1LGx0rbopZpUHtccfFZk93UnnRm2x9HLa8sU6GYUzJZD66bcI_ozB2s/d/bg2.gif) repeat-x scroll 0 0 # E1F4FB;
   color: # 003366;
   }
   
   . Dafis {ol-lists
   margin: 0 0 0 30px! important;
   padding: 0! important;
   }
   
   . Dafis-lists ol li {
   background-color: # C9E9F4;
   line-height: 1.5em;
   margin: 1px 3px! important;
   white-space: nowrap;
   text-align: left;
   border: 1px solid # 339DC6;
   }
   
   . Dafis-lists ol li a {
   text-decoration: none! important;
   color: # 333! important;
   display: block;
   padding-left: 10px;
   }
   
   . Dafis-lists ol li a: hover {
   background: # 7BC4DF;
   border-left: 5px solid # 333;
   padding-left: 5px;
   text-shadow: 0 1px 1px RGBA (0,0,0, .3);
   }
   

5. Then: put code below the above code </ head>
   

   <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>

6. Click Save Template

The next step:

1. Create an article with the title up to you (eg: Table of contents or site map)
2. Move mode to Edit mode Editor HTML article
3. Copy and paste the code below into the article:
   

   <script type="text/javascript" src="http://hensblog.googlecode.com/files/dafis_accv1.js"> </ script>
   <script src="http://weblearning27.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"> </ script>

4. Change the URL of the blue code with your Blog URL
5. Publish articles.

Good luck good luck and helpful!

Read also this....