GUSAR

Masih menyinggung tentang postingan sebelumnya tentang cara membuat Menu Vertikal dengan menggunakan Jquery accordion, kenapa saya mengaitkannya dengan postingan »»Jquery accordion Menu Vertikal»»???.karena pada postingan ini masih sama fungsinya dengan postingan tersebut.
Perbedaannya pada postingan ini tentang Cara Membuat List Menu Vertikal menggunakan CSS. Intinya menu - menu yang biasa melintang horizontal diatas bisa anda susun secara vertikal di sidebar anda,

Pembuatan menu vertikal ini murni dengan CSS saja, dengan begitu menu - menu yang akan dibuat tidak akan membuat blog anda menjadi berat:
Buat anda yang ingin mencobanya, caranya:
»»»» Login ke blogger.com
»»»» Pilih Tata letak
»»»» Klik Edit Html
»»»» Kemudian cari ]]></b:skin>, letakan kode - kode berikut diatasnya:

#accordion ul {
        list-style:none;
        width:332px;
        margin:0;
        padding:0;
        display:none;  
    }
#accordion li {
       list-style:none;
    }
#accordion li a,  #accordion li a:visited {
       background:#666666;
       color: #FFFFFF;
       border-bottom: 1px solid #FFFFFF;
       display: block;
       text-transform: capitalize;
       margin: 0;   
       padding: 5px 0px 8px 10px;
       font: normal 13px Georgia, Times New Roman;
    }
#accordion li a:hover, #accordion li a:active {
      color: #000000;
      background:#ffffff;
      margin: 0;
      padding: 5px 0px 8px 10px;
      text-decoration: none;
    }

»»»» Simpan template
»»»» Klik Element Halaman
»»»» Tambah gadget, klik (HTML/JavaScript), kemudian masukan kode berikut:

<ul id="accordion">
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>  
<li><a href="#">Category 4</a></li>
<li><a href="#">Category 5</a></li>
<li><a href="#">Category 6</a></li>
<li><a href="#">Category 7</a></li>
<li><a href="#">Category 8</a></li>
</ul>

»»»» Simpan Gadget
»»»» Selamat mencoba!!!!