Membuat Daftar Isi Akordion dengan Sortir Label

Setelah menghajar keyboard(nyapcai) disalah satu sites Paid To Typing jempol rada pegel dan mata berkunang-kungang,akhirnya beranjak sejenak meninggalkan PC dan langsung ke warteg (minta sedekah untuk makan sahur hehehe.....). Setelah makan,sambil rokok-an langsung menghadap layar Komputer lagi. Iseng-iseng buka blog indolaron,ternyata ada Visitor yang berkomentar tertarik dengan Script Sitemap yang ada di blog saya.

Memenuhi permintaan dari sobat Wammy, indolaron akan mencoba memberi Tutorial Cara Membuat Daftar Isi(Sitemap) akordion berdasarkan label.
Tutorial ini saya peroleh dari Master Web Design dan Web Develop Taufik Nurrohman. Sebenarnya saya juga gak begitu paham tentang yang di jabarkan oleh Beliau masalah JQuery,tetapi setelah saya otak-atik dan di cermati dengan seksama akhirnya code-code bisa berjalan.

Langkah Membuat Daftar Isi Akordion dengan Sortir Label

TAHAP I - MODIFIKASI kode CSS
1.Klik Template » Edit HTML » Proceed
2.Cari kode ]]></b:skin> kalau dah ketemu letakkan kode CSS berikut tepat diatasnya:

#daftar-isi {
background-color:#333;
border:2px solid #fafafa;
color:#fff;
margin-bottom:10px;
-webkit-box-shadow:0 1px 2px #000;
-moz-box-shadow:0 1px 2px #000;
box-shadow:0 1px 2px #000;
margin-top:-55px;
overflow:hidden;
}
#daftar-isi .judul-label {
overflow:hidden;
cursor:pointer;
text-decoration:none;
font:normal 13px/100% 'Electrolize',Arial,Sans-serif;
padding:10px 15px 11px;
color:#bbb;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
border-top:1px solid #444;border-bottom:1px solid #222;
background-color:#333;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333333');
background-image:-webkit-linear-gradient(top, #3c3c3c, #333);
background-image:-moz-linear-gradient(top, #3c3c3c, #333);
background-image:-o-linear-gradient(top, #3c3c3c, #333);
background-image:linear-gradient(top, #3c3c3c, #333);
}
#daftar-isi .headactive {
color:#efefef;
border-top:1px solid #24B6E3;border-bottom:1px solid #104968;
background-color:#248AB0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB0', endColorstr='#21739B');
background-image:-webkit-linear-gradient(top, #248AB0, #21739B);
background-image:-moz-linear-gradient(top, #248AB0, #21739B);
background-image:-o-linear-gradient(top, #248AB0, #21739B);
background-image:linear-gradient(top, #248AB0, #21739B);
}
#daftar-isi ol {
background-color:#333;
margin:0 0;
padding:0 0;
color:#999;
list-style:none;
}
#daftar-isi li {
line-height:normal;
font:normal 11px/100% 'Verdana',Arial,Sans-serif;
margin:0 0;
white-space:nowrap;
padding:5px 5px 5px 15px;
text-align:left;
border-top:1px solid #444;border-bottom:1px solid #222;
}
#daftar-isi li:first-child {border-top:none;}
#daftar-isi a              {color:#5687f8;}
#daftar-isi a:hover        {text-decoration:underline;}
#daftar-isi a:visited      {color:#5687b8;}
#daftar-isi strong {
font-weight:bold;
font-style:italic;
color:red;
}

lalu Save template lalu Close dialog
TAHAP II - BUAT HALAMAN BARU
1.Klik Pages/Laman » New page/Laman baru » Blank page/Laman kosong
2.Beri nama halaman sesuai keinginan anda(misal:Sitemap,Daftar Isi,Table of Content,dll)
3.Pilih mode HTML
4.Copy paste code dibawah ini ke dalam formulirnya

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var showNew    = true,
accToc     = true,
openNewTab = true, 
maxNew     = 10,
baru       = "Baru!",
sDownSpeed = 600,
sUpSpeed   = 600;
</script>
<script src="https://sites.google.com/site/indolaron/file-js/labels-accordion.js" type="text/javascript"></script>
<script src="http://indolaron.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

5. Lalu Simpan dan Terapkan
Catatan:
- Kode warna Biru :  jika pada template anda sudah sudah terdapat code tsb,maka tidak perlu menyisipkan lagi
- Tulisan warna Merah! : boleh ganti dengan keinginan kalian anda  (misal:New!!, Terbaru!!, dll).
- Ganti URL http://indolaron.blogspot.com dengan URL blog Anda

- var showNew : Jika bernilai true, tanda merah bertuliskan Baru! akan ditampilkan, jika bernilai false, tanda merah bertuliskan Baru! akan disembunyikan.

- accToc : Jika bernilai true, effect accordion akan diterapkan, jika bernilai false, effect accordion akan hilang sehingga semua daftar isi akan terlihat.

- openNewTab : Jika bernilai true, setiap link akan secara otomatis terbuka di tab/jendela baru saat diklik, jika bernilai false, setiap link akan terbuka di tab/jendela yang sama saat diklik.

- maxNew : Digunakan untuk menentukan jumlah maksimal Baru! yang tampil pada setiap posting baru (Menentukan seberapa banyak posting bisa disebut sebagai posting baru).

- sDownSpeed : Digunakan untuk menentukan kecepatan effect .slideDown() panel.

- sUpSpeed : Digunakan untuk menentukan kecepatan effect .slideUp() panel.

sumber: http://hompimpaalaihumgambreng.blogspot.com/2012/02/widget-daftar-isi-akordion-dengan.html#.UBQlfNlTenA
SEMOGA BERMANFA'AT...!!!