Langkah Pertama

1. Login dulu ke blogger anda
2. Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
3. Setelah itu cari kode berikut ini ]]></b:skin>
4. Kemudian copas kode dibawah ini dan taruh diatasnya
   

   #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/AVvXsEgAlNfrpfFNqKJjFEwuh4kwiwExQyM6itoHYiaXFJ4b4qU9i2XpjUgkM_3vpOsA-RsLTe6WCX_neQD1Hncf0WyHreEwrmbiEbTE_E1gXHWsUOs1ivleZkfj6OvHtiKVGZsGKd3LccROvso/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/AVvXsEj-E-_fxsjou7jiQSQEB7N36nWzES2HrPLQsQ-QqdMD2cyvAAsMgy32SYTqAAy-NCiehs_BPlX97CMk_9RZF_gxPXgf4oax4PxWZuWTiVq07skdw6_2VTrWs4npD0Q4_NExd_gKxgI1yYs/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/AVvXsEjzPtwnqH2St5crJ0OSUkrqmf6ZlwcYY3bhGmAFFmFyCDy2gaSySr64QQ82XWUxu1V7AWr8l03XkSB6N5wyPorudKrngwUMVV1c2C8J3t3aSrdH-HWOBvAeB_7iMFYjI4n1Wa_2Xl3Flxw/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);
   }

5. Selenjutnya cari kode </head>, lalu letakkan kode dibawah ini diatas kode </head>.
   
   view plainprint?

   1. <script type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>  
Nb : Jika sebelumnya sobat telah memasang scipt jQuery ini lewati saja langkah diatas
6. Kemudian Klik Simpan Template.

1. Buatlah sebuah posting blog dengan judul terserah (Misalnya : Daftar Isi Blog Lengkap Atau Table Of Content )
2. Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.
   
   

   1. <script type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/daftarisimaskolis.js"></script>  
   2. <script src="<span style="color: #990000;">http://namablogsobat.blogspot.com/</span>feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>  
3. Ubah namablogsobat dengan url blog anda
4. Selanjutnya Klik Publish Post.