- Log in ke blog anda
- Klik Rancangan
- Klik Edit HTML
- Masukkan kode berikut setelah kode ]]></b:skin>
<link href='http://bloekoetoek-blogonol.googlecode.com/files/blogonol.css' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://blackkapuas.googlecode.com/files/ddaccordion.js' type='text/javascript'>
</script>
<style type='text/css'>
.mypets{cursor:hand; cursor:pointer; padding:2px 5px; border:1px solid gray; background:#E1E1E1}
.openpet{background:#A9D0F5}
.technology{cursor:hand; cursor:pointer; font:bold 14px Verdana; margin:10px 0}
.openlanguage{color:green}
.closedlanguage{color:red}
</style>
<script type='text/javascript'>
//Initialize first demo:
ddaccordion.init({
headerclass: "mypets",
contentclass: "thepet",
revealtype: "mouseover",
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [0],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["", "openpet"],
togglehtml: ["none", "", ""],
animatespeed: "fast",
oninit:function(expandedindices){
},
onopenclose:function(header, index, state, isuseractivated){
}
})
//Initialize 2nd demo:
ddaccordion.init({
headerclass: "technology",
contentclass: "thelanguage",
revealtype: "click",
mouseoverdelay: 200,
collapseprev: false,
defaultexpanded: [],
onemustopen: false,
animatedefault: false,
persiststate: false,
toggleclass: ["closedlanguage", "openlanguage"],
togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' style='width:13px; height:13px'/> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' style='width:13px; height:13px'/> "],
animatespeed: "fast",
oninit:function(expandedindices){
},
onopenclose:function(header, index, state, isuseractivated){
}
})
</script>
- Kemudian Simpan Template
- Klik Lgi Rancangan
- Klik Tambah Gadget
- Pilih HTML/JavaScript
- Masukkan Kode berikut ke dalamnya (perhatikan juga petunjuk editnya)
<h2>DAFTAR ISI</h2> /* silahkan ganti judul dengan keperluan anda */
<h3 class="mypets">Seo</h3> /* silahkan ganti dengan judul anda */
<div class="thepet">
<script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/Daftar-isi-berdasarkan-tanggal.js"></script>
<script src="http://blogonol.blogspot.com/feeds/posts/default/-/seo?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
<h3 class="mypets">Blog Info</h3>
<div class="thepet">
<script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/Daftar-isi-berdasarkan-tanggal.js"></script>
<script src="http://blogonol.blogspot.com/feeds/posts/default/-/blog%20info?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
<h2>Atribut</h2> /* silahkan ganti dengan judul anda */
<div class="technology">Sahabat</div> /* silahkan ganti dengan judul anda */
<div class="thelanguage">
<ul>
<li><a href="http://anehunikgokil.blogspot.com/" target="new">aneh, unik, gokil</a></li><li><a href="http://ariawijaya.com/" target="new">ariawijaya</a></li> /* silahkan ganti dengan alamat link atau yang lainnya */</ul>
</div>
<div class="technology">Links</div> /* silahkan ganti dengan judul anda */
<div class="thelanguage">
<ul>
<li><a href="http://www.allblogtools.com/" target="new" title="HTML allblogtools">allblogtools</a></li><li><a href="http://html-color-codes.info/" target="new" title="HTML color codes">color codes</a></li> /* silahkan ganti dengan alamat link atau yang lainnya */</ul>
</div>
<div class="technology">
Komentar</div> /* silahkan ganti dengan judul anda */
<div class="thelanguage">
<div style="border: 1px solid rgb(0, 0, 0); height: 280px; overflow: auto; text-align: center; width: 100%;"><div class="imgblock200" style="text-align: center;"><script src="http://anasmcguire.googlepages.com/recentcomment_indo.js"></script><script>var numcomments = 20;var showcommentdate = true;var showposttitle = true;var numchars = 150;var standardstyling = true;</script><script src="http://blogonol.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></div></div> /* silahkan ganti dengan kode lainnya bila anda perlukan */</div>
<a href="http://blogonol.blogspot.com/">Back To HOME</a> /* silahkan ganti dengan alamat blog anda */
Catatan
Bila anda ingin menambahkan kategori atau label lagi tinggal copy kategori sebelumnya dan paste di tempat yang anda inginkan. Copy dari kode <h3 class="mypets"> dan seterusnya. Jangan lupa mengganti judul dan kategori yang berwarna orange. Contohnya seperti di bawah ini. (perhatikan tulisan merah)
<h3 class="mypets">Blog Info</h3><div class="thepet"><script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/Daftar-isi-berdasarkan-tanggal.js"></script>
<script src="http://blogonol.blogspot.com/feeds/posts/default/-/blog%20info?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
Label yang lebih dari satu kata maka spasi diganti %20 misalnya blog info menjadi blog%20info. Sekarang anda sudah mempunyai accordion menu daftar isi dengan posting tiap bulan dan menurut kategori yang anda berikan pada posting anda sendiri. Ingat, seluruh posting anda terlebih dahulu disetting berdasarkan kategori atau label dan usahakan jangan terlalu banyak kategori yang anda berikan pada keseluruhan posting anda. Jla tersebut dapat berakibat memperbanyak jumlah kategori dalam accordion nantinya.
- Simpan Template
- Lihat Hasilnya
- Selamat Mencoba dan Sukses Selalu
"keep spirits and do the best"
