Daftar Isi Efek jQuery Accordion

Bahan dasar dari pembuatan daftar isi ini masih menggunakan JSON Feed dengan diberikan sentuhan efek animasi accordion (slideup slidedown) dan efek animasi bergoyang dengan framework jQuery, sehingga menjadikan daftar isi versi ini layak untuk dicoba. Dipilihnya efek animasi accordion supaya daftar isi ini lebih ringkas dan tidak terlalu panjang serta artikel yang di susun berdasarkan Label/Kategori. Daftar isi yang ringkas, mudah dan rapi untuk blog anda yang ingin tampil lebih profesional.

Sebelum dilanjutkan bagaiaman cara membuatnya terebih dulu kita lihat demonya KLik Disini 


Integrasi Daftar Isi dengan Efek jQuery Accordion pada Template Blogger
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4 
Masukan (copy paste) kode CSS dibawah ini diatas 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/AVvXsEjNfjGFO4pdbRldYb6_lipPVzj1ftL9yJ-iNym41q_KrJSplsx3_eTS54z9nihTtq5frt7lIROOG3VoLjoou0Dlz_WkM6x4V5i2Xev3Gil9B8WW_csD7Q0c9wl_-C66pWeXJw33UYMcxg4/d/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.dafis-label{
background:url(http://img407.imageshack.us/img407/6319/bgnav1wo8.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: #A4A4A4;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #B40404;
}
.dafis-label:hover{
background:#B40404;url(#) repeat-x scroll 0 0 #E1F4FB;
color:#000000;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#DF0101;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #B40404;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:10px;
}
.dafis-daf ol li a:hover{
background: #B40404;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

Langkah 5
Cari kode dibawah  ini:

</head>

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

Perhatian! Ingat jika pada bagian tag head pada template blogger anda sudah pernah/ada framework jQuery maka lewati Langkah 6 ini (Baca disini)
Langkah 7
Simpan template blogger...

Integrasi Daftar Isi dengan Efek jQuery Accordion pada Artikel
Langkah A
Buat sebuah artikel dengan judul terserah anda (misal; Daftar Isi atau Table of Content)
Langkah B
Pindahkan mode Editor artikel ke mode Edit HTML
Langkah C
Masukan (copy paste) kode dibawah ini ke dalam artikel :

<script src="http://xpareblog.googlecode.com/files/xpare%20bloggg.js" type="text/javascript">
</script>
<script src="http://xpare-com.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Silahkan Ganti Alamat http://xpare-com.blogspot.com dengan alamat blog anda pada langkah C baris ke 3