Membuat Daftar Isi Dengan jQuery

Nah,keren kan tampilanya? jika kamu ingin melihat demonya langsung silahkan klik disini. lalu bagaimana cara membuat daftar isi dengan jquery tersebut? ikuti langkah-langkah dibawah ini!

1. Login ke blogspot.
2. Klik Design/Rancangan.
3. Edit HTML.
4. Kemudian letakan kode dibawah ini di atas kode ]]></b:skin> 
   
   #dafis-acc{
   font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#333;
   background:#ffffff;
   }
   .dafis-label {
   background: url("http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KS/AAAAAAAAEBc/Tqfaca2nwmo/d/bg4.gif") repeat-x scroll 0 0 #E1F4FB;
   border: 1px solid #2F94BA;
   color: #FFFFFF;
   cursor: pointer;
   font-weight: bold;
   line-height: 1.4em;
   margin: 1px 3px;
   outline: medium none;
   overflow: hidden;
   padding: 2px 10px;
   text-decoration: none;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
   vertical-align: baseline;
   white-space: nowrap;
   }
   .dafis-label:hover {
   background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifSxCsIq5en-TRSBBmjFaZRHsH7I_qxryEcgmt_XkiimBIriVg19RuP9PV0hl5zjU2knsmwuh-7Pvi9VK6QSPTBKv6zV-uyG4YuNd3teTByBzIL18scUe4gQXlCCPY6xwmKG1w4hX7Mdk/d/bg2.gif") repeat-x scroll 0 0 #E1F4FB;
   color: #003366;
   }
   .dafis-daf ol {
   margin: 0 0 0 30px !important;
   padding: 0 !important;
   }
   .dafis-daf ol li {
   background-color: #C9E9F4;
   border: 1px solid #339DC6;
   line-height: 1.5em;
   margin: 1px 3px !important;
   text-align: left;
   white-space: nowrap;
   }
   .dafis-daf ol li a {
   color: #333333 !important;
   display: block;
   padding-left: 10px;
   text-decoration: none !important;
   }
   .dafis-daf ol li a:hover {
   background: none repeat scroll 0 0 #7BC4DF;
   border-left: 5px solid #333333;
   padding-left: 5px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
   
   
5. Copy kode dibawah ini dan letakkan diatas kode </head>
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   
   Tapi jika di blogmu sudah ada kode seperti ini maka kamu boleh meninggalkan langkah no 5 ini.
   
6. Jika sudah,copy dan paste kode dibawah ini,boleh kamu letakkan dalam postingan maupun widget blog kamu.
   
   <script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script><script src="http://anakdandunia.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
   
7. Ganti yang berwarna merah dengan URL blogmu.Selesei.

Mudah bukan? sulit ya? ya sudah,kalo mau yang gampang silahkan kamu copy kode dibawah ini,letakkan dipostingan kamu lalu terbitkn..
 
<style type='text/css'>
#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/AVvXsEjFdwdpWI-FMSTqOiiRRVX2kVP7ARIhIs1oWuivu5t3vycc8a33MXCsUYmfzL2meBBZQ7v6AYqy6RQFUBjmCncRXp9nXaCV6Eo80yMMC3I8X5HTvHPrxWonxkbfAQUD_t6gx7cXE0vokeE/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/AVvXsEgokH1UIOznAhmYETJJsFissZKvDrR0fVHbxAknCY1Gxqo_yaYVlxSgFeCEO0VqqyzsyV7qgIeSGm_w4NHdPfmxGiL52iXkitJB3iyhAHK1vBRb-j3LV348uDNdiSLIq9lnQsPCqz7CkTg/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/AVvXsEifSxCsIq5en-TRSBBmjFaZRHsH7I_qxryEcgmt_XkiimBIriVg19RuP9PV0hl5zjU2knsmwuh-7Pvi9VK6QSPTBKv6zV-uyG4YuNd3teTByBzIL18scUe4gQXlCCPY6xwmKG1w4hX7Mdk/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/Acc1.js"></script>
<script src="http://optimus-software.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>