Membuat Daftar Isi Akordion Beranimasi

Bosan dengan tampilan daftar isi otomatis yang lama, kemudian saya hendak menggantinya dengan yang baru. Bukannya jadi top malah berantakan gan, page header blog saya jadi ikutan gak keliatan. Nah, karena kesalahan saya itu jadi googling deh kesana kemari sampe keringetan dan akhirnya nemu script yang namanya membuat daftar isi akordion beranimasi keren gan..mau coba silakan di cek ke TKP.

>>LANGKAH PERTAMA :

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

>> LANGKAH KEDUA :
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 type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/hompishive-labels-v1.js"></script>
<script src="http://breakdoom.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Ganti url http://breakdoom.blogspot.com dengan alamat blog Anda,lalu Simpan dan Terbitkan
(source)