Cara Membuat Menu Vertikal Di Blog Anda !

Cara Membuat Menu Vertikal di Blog

• 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://bujangmusica.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://bujangmusica.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://bujangmusica.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://bujangmusica.blogspot.com/2011/02/kembali-pada-template-klasik.html">Kembali Pada Template Klasik</a></li>
<li><a href="http://bujangmusica.blogspot.com/2010/12/kode-rahasia-seo-blogspot.html">Kode Rahasia Seo BLogspot</a></li>
<li><a href="http://bujangmusica.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://mekatronikasmk3sekayu.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://mekatronikasmk3sekayu.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://bujangmusica.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

Sumber http://blogonol.blogspot.com/2011/03/cara-membuat-menu-vertikal-di-blog.html