Daftar Isi Blog dengan Menu Accordion Black

Daftar Isi Blog dengan Menu Accordion Black ~ Pada kesempatan kali ini, Labib Alfaruqi akan postingkan tentang 'Daftar isi blog dengan menu Accordion Black',  yang mungkin akan cocok buat kalian pasang di blog kalian yang bernuansa hitam. Code daftar isi accordion ini di buat oleh mas Taufik Nurrohman di blog Hompimpa Alaihum Gambreng. Sebelumnya dia mengusulkan saya menggunakan buatannya mas Abu Farhan, tapi akhirnya dia mau membuatkannya yang lebih keren.

Menu Accordion

Saya yakin buat kalian yang templatenya menggunakan nuansa hitam akan tertarik untuk memasangnya (hehe sok yakin). Berikut langkah-langkah untuk membuatnya.

1. Login ke akun blogger kalian.

2. Klik Entri Baru.

3. Lalu Copy-Paste kode di bawah ini ke halaman posting. Tentunya pada posisi Edit HTML, bukan posisi Compose seperti gambar dibawah.

<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       = "Baru!",

        sDownSpeed = 600,

        sUpSpeed   = 600;

</script>

<script type="text/javascript" src="http://reader-download.googlecode.com/files/hompishive-labels-v1.js"></script>

<script src="http://labibalfaruqi24.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

Catatan : 

- Kuning diganti dengan URL blog kalian

- Putih silahkan kalian hapus jika template kalian sudah menggunakannya

- Hijau : Jika bernilai true, tulisan Baru! akan ditampilkan, jika bernilai false, tulisan Baru! akan disembunyikan.

- Biru : Jika bernilai true, effect accordion akan diterapkan, jika bernilai false, effect accordion akan hilang sehingga semua daftar isi akan terlihat.

- Ungu : Jika bernilai true, setiap link akan secara otomatis terbuka di tab/jendela baru saat diklik, jika bernilai false, setiap link akan terbuka di tab/jendela yang sama saat diklik.

- Orange : Digunakan untuk menentukan jumlah maksimal Baru! yang tampil pada setiap posting baru (Menentukan seberapa banyak posting bisa disebut sebagai posting baru).

- Baru! : Silahkan kalian ganti dengan tulisan yang kalian inginan kalian (New!!, Terbaru !! dll).

- Pink : Digunakan untuk menentukan kecepatan effect .slideDown() panel.

- Biru Muda : Digunakan untuk menentukan kecepatan effect .slideUp() panel.

4. Jangan lupa untuk menonaktifkan komentar. Kemudian klik Terbitkan Entri/Publish

Semoga bermanfaat. Amin. 
Happy Blogging

Baca juga artikel yang lainnya disini

Sumber : http://sakawku.blogpsot.com