Cara Membuat Menu Vertikal di Blog

Diberdayakan oleh

Update-Saya posting singkat aja gan, hanya share cara membuat menu vertikal di blog. Silahkan ikuti langkah berikut.

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

Jumat, 25 Maret 2011

Cara Membuat Menu Vertikal di Blog

Tidak ada komentar:

Pengikut