Cara membuat daftar isi akordion dengan sortir label pada blog - Daftar isi saya rasa penting sekali disematkan pada blog, hal mungkin akan memudahkan para pengunjung blog kita dalam mencari artikel yang mereka perlukan, daftar isi ini saya rasa bagus sekali karena disana tertampung seluruh isi blog yang disortir berdasarkan label yang pernah kita buat. Script ini saya juga dapatkan pada blog Taufik Nurrohman, dan saya juga sebenarnya tidak paham akan kode-kode yang disertakan beliau. Hanya saja saya share kembali, karena script daftar isi saya rasa cocok dengan selera saya.
Nah sobat jika ingin menyematkannya pada blog Cara membuat daftar isi dengan sortir per label pada blog sobat silahkan saja, inilah script dan cara penerapannya :
Seperti biasa masuk akun dasbor >> Klik Template >> Edit HTML. Dan temukan kode berikut ]]></b:skin>. Setelah ketemu letakan saja Kode CSS dibawah ini persis diatasnya :
Lalu save template anda.
Pada tahap selanjutnya silahkan sobat membuat postingan baru, beri judul terserah anda mau Daftar Isi atau Sitemap.Dan copas kode script dibawah ini pada mode HTML jangan pada mode Compose.
Lalu publikasikan.
Sebagai catatan :
- Kode warna Biru : jika pada template anda sudah sudah terdapat code tsb,maka tidak perlu menyisipkan lagi
- Tulisan warna Merah! : boleh ganti dengan keinginan kalian anda (misal:New!!, Terbaru!!, dll).
- Ganti URL http://wan-soe.blogspot.com dengan URL blog Anda
Nah sobat jika ingin menyematkannya pada blog Cara membuat daftar isi dengan sortir per label pada blog sobat silahkan saja, inilah script dan cara penerapannya :
Seperti biasa masuk akun dasbor >> Klik Template >> Edit HTML. Dan temukan kode berikut ]]></b:skin>. Setelah ketemu letakan saja Kode CSS dibawah ini persis diatasnya :
#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;
margin-top:-55px;
overflow:hidden;
}
#daftar-isi .judul-label {
overflow:hidden;
cursor:pointer;
text-decoration:none;
font:normal 13px/100% 'Electrolize',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-color:#333;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333333');
background-image:-webkit-linear-gradient(top, #3c3c3c, #333);
background-image:-moz-linear-gradient(top, #3c3c3c, #333);
background-image:-o-linear-gradient(top, #3c3c3c, #333);
background-image:linear-gradient(top, #3c3c3c, #333);
}
#daftar-isi .headactive {
color:#efefef;
border-top:1px solid #24B6E3;border-bottom:1px solid #104968;
background-color:#248AB0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB0', endColorstr='#21739B');
background-image:-webkit-linear-gradient(top, #248AB0, #21739B);
background-image:-moz-linear-gradient(top, #248AB0, #21739B);
background-image:-o-linear-gradient(top, #248AB0, #21739B);
background-image:linear-gradient(top, #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;
white-space:nowrap;
padding:5px 5px 5px 15px;
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;
}
Lalu save template anda.
Pada tahap selanjutnya silahkan sobat membuat postingan baru, beri judul terserah anda mau Daftar Isi atau Sitemap.Dan copas kode script dibawah ini pada mode HTML jangan pada mode Compose.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var showNew = true,
accToc = true,
openNewTab = true,
maxNew = 10,
baru = "Baru!",
sDownSpeed = 600,
sUpSpeed = 600;
</script>
<script type="text/javascript" src="http://wanbloggers-code.googlecode.com/files/daftar%20isi%20acordion.js"></script>
<script src="http://wan-soe.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Lalu publikasikan.
Sebagai catatan :
- Kode warna Biru : jika pada template anda sudah sudah terdapat code tsb,maka tidak perlu menyisipkan lagi
- Tulisan warna Merah! : boleh ganti dengan keinginan kalian anda (misal:New!!, Terbaru!!, dll).
- Ganti URL http://wan-soe.blogspot.com dengan URL blog Anda
- var 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).
- sDownSpeed : Digunakan untuk menentukan kecepatan effect .slideDown() panel.
- sUpSpeed : Digunakan untuk menentukan kecepatan effect .slideUp() panel.
Demikianlah Cara membuat daftar isi akordion dengan sortir label blog, semoga anda terbantu dengan tulisan ini.
