Silahkan lihat contoh Daftar Isi Efek jQuery Accordion disini.
Berikut langkah-langkah membuat Daftar Isi Efek jQuery Accordion:

Langkah 1
Login ke Blogger

Langkah 2
Masuk ke "Rancangan - Edit HTML"

Langkah 3
Cari kode dibawah ini:

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada Langkah 3:

#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/AVvXsEggHmSj4v3SmeMilxT8Jgq6yfJG66SGd3DuemcdNkF9O90YZjsJ4kG31QvnNWkrj4fGl4x1Yxmu-1Fp4zZ0_0o_QfxcZ19n2gNqBp7wzgGEF2F6I1sm6o5DJa-4vH5d3iLUMBf7yyVtM1g/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/AVvXsEjOltQsxg9pKffxw0_vD1KQkSCVSiOvAErTpnxCPmOUkLV8Z7ExcQGVRFejPuphW5QAB7p12LOYYNjYabCpKiUMvV-wqip1cMYt1y6EiazkMN5M9d70IuzJO8kLmCYjfp2vcqQS-n2A4Yo/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/AVvXsEiPTYFOcf9l5FJmcPx9l3RSM3JA6HNMNz4h8Yw-lpu0IONB_C-p_bwFrxyhUEg7hqNCyw2tOdSpPK1Rb_cZBNVYXEpFgCvprCm_yfPasboTDBH-_La7ukTFHah9oHqko44a7yrnr_M1548/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);
}

Langkah 5
Cari kode dibawah ini:

Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada Langkah 5:


Perhatian! Ingat jika pada bagian tag head pada template blogger anda sudah pernah/ada framework jQuery maka lewati Langkah 6 ini

Langkah 7
Simpan template blogger...

Cara membuat Daftar Isi dengan Efek jQuery Accordion pada Artikel:
Langkah 1
Buat sebuah artikel dengan judul terserah anda (misal; Label dan Isi Artikel)
Langkah 2
Pindahkan mode Editor artikel ke mode Edit HTML
Langkah 3
Masukan (copy paste) kode dibawah ini ke dalam artikel :

Langkah 4
Ubah URL blog pada langkah 3 (warna biru) sesuai dengan URL Blog anda
Langkah 5
Terbitkan artikel dan preview artikel tersebut...



tutorial "Daftar Isi Efek jQuery Accordion" diambil dari "http://modification-blog.blogspot.com/"