Sitemap accordion ini memang sangat unik dan menarik sekali. Selain itu, sitemap accordion ini juga memiliki fungsi yang sangat penting. Jika di ibaratkan sebuah buku, maka sitemap ini seperti daftar isi bagi blog anda di mana segala seuatu yang berkaitan dengan konten/artikel blog anda di muat.
Untuk membuat sitemap accordion ini lebih baik anda letakkan di bagian static page atau di dalam postingan saja, karena agar bobot blog anda tidak terlalu berat. Langsung saja simak tutorial cara membuat sitemap accordion dengan sortiran category berikut ini!
1. Pertama, silahkan buat lama (static page) baru dengan cara klik menu "Laman" lalu pilih "Laman Kosong".
2. Kemudian Pilih HTML
3. Lalu masukkan script kode berikut ini :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>4. Klik publikasikan/simpan dan selesai...
<link href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" media="screen" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
var showNew = true,
accToc = true,
openNewTab = true,
maxNew = 10,
baru = "Baru!",
sDownSpeed = 600,
sUpSpeed = 600;
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/hompishive-labels-v1.js" type="text/javascript"></script>
<script src="http://ngeposta.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Note :
Ganti http://yuhooplox.blogspot.com dengan alamat url blog anda.
Untuk penyesuaian kode sitemap accordion dengan sortiran category ini bisa anda lihat pada tabel berikut ini!
| Opsi | Nilai | Keterangan |
|---|---|---|
| showNew | true | Jika bernilai true, tanda merah bertuliskan Baru! akan ditampilkan, jika bernilai false, tanda merah bertuliskan Baru! akan disembunyikan. |
| false | ||
| accToc | true | Jika bernilai true, efek akordion akan diterapkan, jika bernilai false, efek akordion akan hilang sehingga semua daftar isi akan terlihat. |
| false | ||
| openNewTab | true | 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. |
| false | ||
| maxNew | 1, 2, 3, ... (numerik) | Digunakan untuk menentukan jumlah maksimal Baru! yang tampil pada setiap posting baru (Menentukan seberapa banyak posting bisa disebut sebagai posting baru). |
| baru | "Baru!", "New!", "Terbaru!", ... (teks) | Digunakan untuk mengubah teks Baru!. |
| sDownSpeed | "slow", "fast", 600, 1000 ... (kecepatan valid pada JavaScript) | Digunakan untuk menentukan kecepatan efek .slideDown() panel. |
| sUpSpeed | "slow", "fast", 600, 1000 ... (kecepatan valid pada JavaScript) | Digunakan untuk menentukan kecepatan efek .slideUp() panel. |
Thanks
Atau bisa juga dengan kode berikut!
<div dir="ltr" style="text-align: left;" trbidi="on">Note: Ganti http://yuhooplox.blogspot.com dengan URL Blog anda
<div style="margin-top: -10px;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script><br />
<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><br />
<script type="text/javascript">
showNew = true;
accToc = true;
openNewTab = true;
var maxNew = 10,
baru = "New!!!",
sDownSpeed = 600,
sUpSpeed = 600;
</script><br />
<script src="http://yourjavascript.com/123135733222/daftarisi.js" type="text/javascript">
</script><br />
<script src="http://yuhooplox.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script></div>
<div style="text-align: right;">
<div style="margin-top: -10px;">
</div>
</div>
</div>
</div>
ConversionConversion EmoticonEmoticon