Daftar Isi dengan Menu Accordion Black yang mungkin referensi buat anda dan mungkin lagi akan cocok buat anda pasang di blog anda yang bernuansa hitam. Seperti preview di bawah ini :
Tutorial tentang cara membuat Daftar Isi dengan Menu Accordion Black ini saya copas di blog nya Arman Blog yang kata dia codenya di buat oleh mas Taufik Nurrohman di blog Hompimpa Alaihum Gambreng.
Cara membuatnya anda tinggal copas saja script di bawah ini, ga usah pusing2 membuat sendiri hehe....
Cara menerapkannya pada blog anda :
Sekian dan Terimakasih........ Semoga membantu !!!!!!!
Preview menu according black
Daftar Isi dengan Menu Accordion Black ini bisa anda simpan pada menu sitemap pada blog anda. Tutorial tentang cara membuat Daftar Isi dengan Menu Accordion Black ini saya copas di blog nya Arman Blog yang kata dia codenya di buat oleh mas Taufik Nurrohman di blog Hompimpa Alaihum Gambreng.
Cara membuatnya anda tinggal copas saja script di bawah ini, ga usah pusing2 membuat sendiri hehe....
| <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 = "New!",sDownSpeed = 600,
sUpSpeed = 600;
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/files/hompishive-labels-v1.js"></script>
<script src="http://free-exempt.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
|
Catatan :
- Ganti URL http://free-exempt.blogspot.com dengan URL blog anda
- Kode berwarna Biru : JQuery (yang ada di atas), silahkan kalian hapus "jika template kalian sudah menggunakannya"
- Tulisan New! : Silahkan anda ganti dengan keinginan anda (Baru !, New!!, Terbaru !!, dll)
- Jangan lupa untuk menonaktifkan komentar. Yang berada pada setelan entri.
Logika :
- showNew : Jika bernilai true, pemberitahuan - New! (tulisan berwarna merah) akan ditampilkan, jika bernilai false, pemberitahuan - New! 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 New! yang tampil pada setiap posting baru (Menentukan seberapa banyak posting bisa disebut sebagai posting baru).
- sDownSpeed : Digunakan untuk menentukan kecepatan effect .slideDown() panel.
- sUpSpeed : Digunakan untuk menentukan kecepatan effect .slideUp() panel.
- Login ke Blogger anda
- Klik Laman > Laman baru
- Lalu Copas koding di atas tadi ke halaman posting. Tentunya pada posisi Edit HTML bukan posisi Compose. Seperti yang ditunjukan gambar di bawah ini :
- Jika sudah, Simpan atau Perbaharui dan publikasikan
Sekian dan Terimakasih........ Semoga membantu !!!!!!!
