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(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB;

padding:2px 0;

border:1px solid #339DC6;

}

.dafis-label{

background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/S-KAVk09KSI/AAAAAAAAEBc/Tqfaca2nwmo/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(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAVlLiuVI/AAAAAAAAEBU/Hd-n_8N7qak/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