Membuat Daftar Isi Otomatis Dengan Efek Accordion

Kali ini Saya akan membagikan tutorial "Daftar Isi Dengan Efek Accordion". Daftar isi ini termasuk simple dan mudah dengan desain yang elegan. Kenapa Saya bilang simple dan mudah? itu di karenakan penerapan daftar isi yang simpel dan tentunya automatis. Saya katakan automatis itu di karenakan jika ada postingan baru, maka daftar isi tersebut akan menampilkannya denganl label/text "New".

Ok, begini penerapannya:

Pemasangan Daftar Isi Pada Halaman Page

1. Login ke Blogger, pada Dashboard blog pilih Laman/Pages
2. Buatlah halaman baru
3. Pilih pada bagian EDITNG HTML
4. Lalu masukan Script ini

<style type="text/css">
#navtopx,#header-wrapper,.tab-widget-menu{display:none}
#comments,.sidebar li,#sidebaratas .widget, #sidebarbwh .widget, #sidebartngh,#footer {display:none}
#daftar-isi {
  background-color:#333;
  margin-top: 10px;
  color:#fff;
  -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 #920707;border-bottom:1px solid #660000;
  background:#ff0000;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#920707', endColorstr='#660000');
  background:-webkit-linear-gradient(top, #920707, #660000);
  background:-moz-linear-gradient(top, #920707, #660000);
  background:-o-linear-gradient(#920707, #660000);
  background:linear-gradient(#920707, #660000));
}

#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:#BD0000;}
#daftar-isi a:hover        {text-decoration:underline;}
#daftar-isi a:visited      {color:#BD0000;}

#daftar-isi strong {
  font-weight:bold;
  font-style:italic;
  color:#AD1010;
}
</style>
<script type="text/javascript">
    showNew    = true;
    accToc     = true;
    openNewTab = true;

    var maxNew     = 2,
        baru       = "New Post!!!",
        sDownSpeed = 700,
        sUpSpeed   = 700;
</script>
<script src="https://dmblog-project.googlecode.com/svn/accordianlabel.js" type="text/javascript">
</script>
<script src="http://darkmetaland.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Script yang bertandakan kuning ialah merupakan tanda untuk postingan baru, Anda bisa menggantinya sesuai selera.
Script yang bertandakan Hijau merupakan kode warna HTML, Anda bisa mengubahnya di Sini.
Dan script yang bertandakan putih ialah url blog yang harus di ganti menjadi url blog Anda.

Dan yang terkahir Publish/Update.