Cara Membuat Daftar Isi Otomatis dengan Efek jQuery According

Cara Membuat Daftar Isi Otomatis dengan Efek jQuery Accordion – Jika pada postingan sebelumnya saya telah membahas tentang cara membuat daftar isi otomatis ala Abu-farhan maka kali ini saya akan share yang lebih keren lagi yakni dengan menggunakan efek jQuery according.

Jika sobat tertarik untuk memasangnya pada blog sobat ikuti tutorialnya di bawah ini.

1. Login ke blogger atau klik disini

2. Pada dashboard blog sobat pilih Laman

3. Pilih Laman baru Laman kosong

4. Pada bagian editing Pilih HTML

5. Copy paste kode CSS di bawah ini.

<style type="text/css">
#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:#5687f8;}
#daftar-isi a:hover        {text-decoration:underline;}
#daftar-isi a:visited      {color:#5687b8;}

#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!!!",
        sDownSpeed = 700,
        sUpSpeed   = 700;
</script>
<script src="https://junedneutron.googlecode.com/files/akordionLabel.js" type="text/javascript">
</script>
<script src="http://capoenk-blog.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Catatan:

• Ganti code yang berwarna biru silahkan ganti dengan alamat url blog sobat.
• Kode warna kuning merupakan tanda untuk postingan baru, silahkan ganti dengan kalimat lainnya misalnya baru.
• Kode warna merah merupakan code warna html silahkan ganti dengan warna kesukaan sobat. Lihat kode warna-warna Html disini

6. Dan yang terakhir klik Pulikasikan

7. Untuk melihat hasilnya silahkan sobat kembali lagi ke tag laman kemudian pilih Lihat.

Demikia artikel tentang Cara Membuat Daftar Isi Otomatis dengan Efek jQuery According semoga bermanfaat.