Cara Membuat Daftar Isi Accordion

Daftar Isi Accordion merupakan daftar isi yang sangat unik dan sangat membantu para pengunjung blog dalam melihat daftar isi suatu blog, dilihat dari nama nya sudah Accordion yang merupakan sebuah alat musik yang dimainkan naik turun dan mengeluarkan bunyi/suara, begitu juga pada Daftar isi Accordion yang akan saya jelaskan ini, semua update postingan terbaru akan otomatis langsung berada di dalam daftar isi Accordion ini dan apabila postingan terbaru akan terdapat tulisan New!!! atau Baru!!! kita bisa menggantinya sesuai dengan keinginan kita.berikut ini adalah bagaimana cara membuat daftar isi Accordion Tersebut sahabat bisa lihat dibawah ini.

Silahkan Ikuti Langkah-langkah berikut :

1. Silahkan login akun Blog Anda

2. Pilih menu Posting dan Pilih Edit Laman

3. Setelah itu pilih Tambah Laman / Laman Baru

4. Kemudian Pada Laman Pilih Edit HTML

5. Dan Copy dan kode di bawah ini :

<!-- Content - http://galang-capricorn.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://wisnunugraha.googlecode.com/files/AccordionList.js" type="text/javascript">
</script>
<script src="http://galang-capricorn.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
<div style="text-align: right;">
<div style="margin-top: -10px;">
<a href="http://galang-capricorn.blogspot.com/" target="_blank"><img alt="wIzYuLoVeRz" border="0" height="20px" src="http://i1123.photobucket.com/albums/l546/wizyuloverz/Banner.png" title="Sharing Science, Information And Software" widith="200px" /></a></div>
</div> 
<!-- Content - http://wizyuloverz.blogspot.com - End -->

6. Sahabat bisa mengganti tulisan berwarna Pink sesuai dengan keinginan sahabat, misalnya : Baru!!!, Terbaru!!!, New!! dan lain sebagainya.
7. Tulisan Berwarna Biru Muda adalah kecepatan daftar isi pada saat membuka kebawah, sahabat bisa mengaturnya sesuai keinginan.
8. Tulisan Berwarna Biru Tua adalah kecepatan daftar isi pada saat membuka kebawah, sahabat bisa mengaturnya sesuai keinginan .
9.Lalu Langkah terakhir merupakan proses penentuan yang membuat daftar isi berhasil di buat atau tidak, yaitu mengganti tulisan berwarna Kuning dengan Alamat/URL Blog Sahabat.
10. pilih Tayangkan Laman lalu pilih Tidak Ada Gadget kemudian Simpan Dan Terbitan