Membuat Daftar Isi dengan jQuery Accordion

Langkah Pertama :

1. Login dulu ke Blogger Sobat

2. Pada Dasbor masuk ke Rancangan lalu pilih editHTML

3. kemudian copas kode di bawah ini lalu letakan 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/AVvXsEgT88SrgKsuA0x1NMWKLsGep9iF0KHlLfWYwzS1lydDaqP6pgUhUimjBek75Zmaq5rU5lwChulTQII8U-G1IabVzXmalkhDFYLKItPL8ZgoT29tFCFIBDZ5VIS-oWr9S88u0Gs9mj6LWDc/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/AVvXsEiZ7DZwqSlOjERbbjxcXbqoDtmSRveEnSNReOxrOIHyoXeapHdb8wLgSQ9K-zr08i8xjZutkAn4N4de1qA8bAC_6AYwcWlPqQLGtYfHrTTkJKCwyO-8EO3eS8RTfra0AmJkjbHbZSHc8JQ/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/AVvXsEiloUZPuPm0qAxAs8vXtMiEo0_1HxEO6fUSKyB7fENykE9hB8DU9EmXNr0jKNFLA8Kg743wFOtwIevsbkQKSmOLnRmMDpxtf5Es2FjwcZf5tPum0Vn5Or2Mv0_J-xHhdN1x6-KnwrUsSeY/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. Selanjutnya cari kode </head>, lalu copas kode di bawah ini dan letakan di atas kode </head> tadi..

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

Nb : jika sebelumnya sobat sudah memasang scipt jQuery ini lewati saja langkah diatas.

6. Lalu klik Simpan Template

Langkah Kedua :

1. Buatlah sebuah posting blog dengan judul bebas, misal ( Daftar Isi Blog Lengkap)

2. selanjutnya masukan kode ini pada postingan , caranya seperti membuat postingan seperti biasa tapi dalam mode edit HTML. 

<script type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/daftarisimaskolis.js"></script>

<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>

Nb : Ubah tulisan hijau dengan alamat URL blog sobat.

Sumber : http://www.maskolis.com