Home » , , , , » cara membuat Daftar Isi Keren Blog | berdasarkan label dan waktunya

cara membuat Daftar Isi Keren Blog | berdasarkan label dan waktunya

Zul Kadry | 23.59 | 0 komentar
Menu Accordion
Daftar Isi Blog dengan Menu Accordion Black ~  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
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.

Share this article :
Related Posts Plugin for WordPress, Blogger...
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Kadry Tekno Blog - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger