- Log in ke blog anda (jangan blog tetangga yaa)
- Klik Rancangan
- Klik Edit HTML
- Masukkan kode berikut di atas kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/ddaccordion.js"></script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){
}
})
</script>
<style type="text/css">
.arrowlistmenu{width:auto}
.arrowlistmenu .menuheader{font:bold 14px Arial; color:black; background:transparent; margin-bottom:10px; text-transform:uppercase; padding:4px 0 4px 10px; cursor:hand; cursor:pointer}
.arrowlistmenu .openheader{background-image:url(titlebar-active.png)}
.arrowlistmenu ul{list-style-type:none; margin:0; padding:0; margin-bottom:8px}
.arrowlistmenu ul li{padding-bottom:2px}
.arrowlistmenu ul li a{color:#A70303; background:transparent; display:block; padding:2px 0; padding-left:19px; text-decoration:none; font-weight:bold; border-bottom:1px solid #dadada; font-size:90%}
.arrowlistmenu ul li a:visited{color:#A70303}
.arrowlistmenu ul li a:hover{color:#A70303; background-color:#F3F3F3}
</style>
- Save Template
- Klik Rancangan Lagi
- Pilih Tambah Gadget
- Pilih HTML/ JavaScript
- Masukkan Kode ini ke dalamnya
<div class="arrowlistmenu">
<h3 class="menuheader expandable">Blog Info</h3> /* Ganti dengan judul anda */
<ul class="categoryitems">
<li><a href="http://blogonol.blogspot.com/2011/03/cara-membuat-menu-vertikal-di-blog.html">Membuat Menu Vertikal di blog</a></li> /* ganti tulisan merah dengan alamat link atau alamat posting anda */
<li><a href="http://blogonol.blogspot.com/2011/03/award-pertama-blogonol.html">Award Pertama Blogonol</a></li> /* ganti tulisan merah dengan alamat link atau alamat posting anda */
<li><a href="http://blogonol.blogspot.com/2011/03/ada-apa-dengan-komentar-di-blog-anda.html">Ada Apa Dengan Komentar di Blog Anda</a></li> /* ganti tulisan merah dengan alamat link atau alamat posting anda */
</ul>
<h3 class="menuheader expandable">Seo</h3> /* Ganti dengan judul anda */
<ul class="categoryitems">
<li><a href="http://blogonol.blogspot.com/2011/02/kembali-pada-template-klasik.html">Kembali Pada Template Klasik</a></li>
<li><a href="http://blogonol.blogspot.com/2010/12/kode-rahasia-seo-blogspot.html">Kode Rahasia Seo BLogspot</a></li>
<li><a href="http://blogonol.blogspot.com/2010/12/ajaran-sesat-mengenai-alexa-gila-bener.html">Ajaran Sesat Mengenai Alexa</a></li>
</ul>
<h3 class="menuheader expandable">Aneh</h3> /* Ganti dengan judul anda */
<ul class="categoryitems">
<li><a href="http://blogonol.blogspot.com/2011/02/kata-kata-aneh-orang-terkenal.html">Kata-kata Aneh Orang Terkenal</a></li> /* ganti tulisan merah dengan alamat link atau alamat posting anda */
<li><a href="http://blogonol.blogspot.com/2011/02/khayalan-tingkat-tinggi.html">Khayalan Tingkat Tinggi</a></li> /* ganti tulisan merah dengan alamat link atau alamat posting anda */
<li><a href="http://blogonol.blogspot.com/2010/12/dokumen-rahasia-amerika-untuk-indonesia.html">Dokumen Rahasia Amerika Untuk Indonesia</a></li> /* ganti tulisan merah dengan alamat link atau alamat posting anda */
</ul>
<h3 class="menuheader" style="cursor: default">Daftar Isi</h3></div> /* Ganti dengan judul widget anda */
- Silahkan edit tulisan merah untuk link anda dan tulisan biru untuk judul dari link anda.
- Klik Save Template
- Selesai dan lihat hasilnya
- Ok selamat mencoba dan sukses selalu
"keep spirits and do the best"
