Cara Membuat Daftar Isi Accordion

Daftar isi memang sangat penting bagi suatu blog karena berfungsi sebagai alat navigasi untuk menyajikan seluruh artikel yang diposting. kali ini saya akan share tutorial bagaimana cara membuat daftar isi accordion .

Daftar isi ini menggunakkan efek accordion dimaksudkan untuk menghemat ruang yang ada di blog kita. Juga menimbulkan kesan yang rapi dengan artikel yang disusun berdasarkan Label. untuk perjelas lihat screenshot dulu atau lihat DEMO

menarik bukan?, mari kita simak langkah - langkahnya.

1. Login ke akun blogger anda
2. Buat sebuah posting dengan judul Daftar Isi atau terserah anda.
3. Klik tombol HTML disebelah tombol Compose.
4. Masukan kode dibawah ini :

<!-- Content - http://galangkuatir.blogspot.com - Start -->
<div style="margin-top: -85px;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>
<style type="text/css">
#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;
overflow:hidden;
}

#daftar-isi .judul-label {
overflow:hidden;
cursor:pointer;
text-decoration:none;
font:normal 13px/100% 'Verdana',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:#333;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333');
background:-webkit-linear-gradient(top, #3c3c3c, #333);
background:-moz-linear-gradient(top, #3c3c3c, #333);
background:-o-linear-gradient(#3c3c3c, #333);
background:linear-gradient(#3c3c3c, #333));
}

#daftar-isi .headactive {
color:#efefef;
border-top:1px solid #24B6E3;border-bottom:1px solid #104968;
background:#248AB0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB0', endColorstr='#21739B');
background:-webkit-linear-gradient(top, #248AB0, #21739B);
background:-moz-linear-gradient(top, #248AB0, #21739B);
background:-o-linear-gradient(#248AB0, #21739B);
background:linear-gradient(#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;
padding:5px 5px 5px 15px;
white-space:nowrap;
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;
}
</style>
<script type="text/javascript">
showNew = true;
accToc = true;
openNewTab = true;

var maxNew = 10,
baru = "New!!!",
sDownSpeed = 600,
sUpSpeed = 600;
</script>
<script src="http://nesaba.googlecode.com/files/Sak.js" type="text/javascript">
</script>
<script src="http://galangkuatir.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script></div>
<div style="text-align: right;">
<div style="margin-top: -10px;">
</div>
</div>
<!-- Content - http://galangkuatir.blogspot.com - End -->

    5. Ganti  tulisan warna Biru dengan alamat blog sobat.
    6. Publishkan :D