Cara Membuat Daftar Isi Model JQuery Accordion

1. 1. 1.  Login Ke Blogger.
      2. Masuk Ke Rancangan Lalu Edit HTML.
      3. Cari Kode Di Bawah Ini
      4. ]]> Lalu
      5. Masukan (copy paste) kode CSS dibawah ini diatas kode pada Langkah 4:
      #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/AVvXsEiI7hQrusHqdSQtvDaE_f8fVXYgIHbdyY63sIf8uAQ2gl-Fcqm03xq4QtYMwtzkhsvZQJCiLbpyrH6m34Q_T4KguDUFWR-l-uvZM2pkYEMquMjgLSWFrd30TD91MRl1peQxHqmyMmS7jLU/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/AVvXsEhlNKun77y-XyROi9iN5b9kA-MGQ5OVM7o_MvF21B9PkUXzwiZKWO5AgrnAsbOCBwz0uQvGwJD1fPF1VTPHTR3X4PQmpM9KM-gVVf1Y_WCt0Tbjr_xBfbbV5mHVs9yJQY0IXPMW9yx8ZCU/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/AVvXsEi9hsEwfTbIMEj537PmpTJmhNv22zWxgDtzJM9Pvvdi3Gr8ZDYne_G4_lcBG95jZf2BUaHaffnrWXOJWKvyoCz2c4A7TWLtRGUuhy0gor8DMrSKGZvVaWlj17hznjD8pdjbUINOsqyWFZE/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); }
      Cssnya Sudah Dirapatkan Sedikit..
        6.Cari kode dibawah ini:
      </head> atau head
      
      Langkah 7.

      Masukan (copy paste) kode javascript dibawah ini diatas kode pada Langkah 6:
      
      <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
      
       Lalu Simpan Template dan Langkah Terakhir Buat sebuah artikel dengan judul terserah anda (misal; Daftar Isi atau Table of Content) Lalu Ke Mode Edit HTML lalu Masukan (copy paste) kode dibawah ini ke dalam artikel :
      
      
      <script type="text/javascript" src="http://hensblog.googlecode.com/files/dafis_accv1.js"></script>
      <script src="http://NAMABLOGANDA.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
      
      
      Lalu Simpan Jadi Deh Daftar Isi Yang Cantik Menurut SayaModifikasi By : HTC DCC
      
      

      Semoga Berhasil Ya...