Daftar Isi Memakai Efek jQuery Accordion

daftar isi ini masih menggunakanJSON Feeddengan diberikan sentuhan efek animasi accordion (slideup slidedown) danefek animasi bergoyangdenganframework 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.

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 kode pada Langkah 3:

#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);
}

Langkah 5
Cari kode dibawah ini:

</head>

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

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

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 type="text/javascript" src="http://imdad.googlecode.com/files/dafis_accv1.js"></script>
<script src="http://imdad-gresik.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Langkah D
Ubah URL blog pada langkah C (yang di blok) sesuai dengan URL Blog anda
Langkah E
Terbitkan artikel dan preview artikel tersebut...

Daftar Isi Memakai Efek jQuery Accordion 9 out of 10 based on 10 ratings. 9 user reviews.