Daftar Isi Blog dengan Menu Accordion Black

Daftar Isi Blog dengan Menu Accordion Black ~ Stelah posting artikel mengenai Kisah Cinta Tukang Buah dan Tukang Sayur pada tag Love, hari ini ARMAN BLOG akan share sebuah Blogger Tutorial tentang cara membuat Daftar Isi dengan Menu Accordion Black, yang mungkin akan cocok buat kalian pasang di blog kalian yang bernuansa hitam seperti blog tercinta saya. 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 setelah saya menerornya abis-abisan akhirnya dia mau membuatkannya yang lebih keren. Untuk demonya kalian bisa melihatnya di blog ini Site Map >> Category pada menu navigasi diatas atau klik disini.

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 atau Postingan

Posting Posisi Edit HTML

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

<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://sakawku.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

Catatan : 

- Ganti URL http://sakawku.blogspot.com dengan URL blog kalian

- Kode berwarna Hijau : JQuery, silahkan kalian hapus jika template kalian sudah menggunakannya

- showNew : Jika bernilai true, tanda merah bertuliskan Baru! akan ditampilkan, jika bernilai false, tanda merah bertuliskan Baru! akan disembunyikan.

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

- openNewTab : 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.

- maxNew : 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 keinginan kalian (New!!, Terbaru !! dll).

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

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

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

Semoga bermanfaat dan kalian senang. Happy Blogging

Baca juga Blogger Tutorial lainnya.