Cara membuat menu vertikal sederhana

Untuk demo bisa sobat lihat disini, pada bagian menu vertikal tersebut saya menggunakan image sederhana yang hanya akan berwarna biru jika cursor menyorot pada link. Bisa saja membuat current page hover pada link, yang jika di klik akan selamanya berwarna biru selama kita berada pada halaman link tersebut, namun untuk awalnya sebaiknya menggunakan menu yang sederhana dulu.

1. Masuk ke bagian Edit HTML
2. Tambahkan kode css berikut ini sebelum kode ]]></b:skin>

   .clearit {
       margin: 0;
       padding: 0;
       height: 0;
       clear: both;
   }

   
   

   /* BUBBLE PLASTIC VERTICAL MENU */

   .bubplastic.vertical {
       width: 150px;
       margin: 0px;
       padding: 0px;
       display: block;
   }
   .bubplastic.vertical ul {
       display: block;
       list-style: none;
       margin: 0;
       padding: 0;
   }
   .bubplastic.vertical ul li {
       display: block;
       float: left;
       width: 100%;
       margin: 0;
       padding: 0;
       background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top left no-repeat;
   }

   .bubplastic.vertical ul li a {
       display: block;
       margin: 0;
       width: 100%;
       padding-left: 15px;
       text-transform: uppercase;
       font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
       font-size: 70%;
       color: #FFFFFF;
       text-decoration: none;
       background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top left no-repeat;
   }

   .bubplastic.vertical ul li a span.menu_ar {
       display: block;
       margin: 0;
       width: 100%;
       height: 22px;
       padding-top: 5px;
       padding-right: 15px;
       background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top right no-repeat;
       cursor: pointer;
   }

   /* BLUE HOVER */
   .bubplastic.blue ul li a:hover,
   .bubplastic.blue ul li.highlight a {
       background: transparent url(http://lh4.ggpht.com/_7Y9pl24WpQY/TCTaTTyG38I/AAAAAAAAEOk/s7mSQh3v_oo/bg-bubplastic-h-blue_thumb%5B3%5D.gif) top left no-repeat;
   }
   .bubplastic.blue ul li a:hover span.menu_ar,
   .bubplastic.blue ul li.highlight a span.menu_ar {
       background: transparent url(http://lh4.ggpht.com/_7Y9pl24WpQY/TCTaTTyG38I/AAAAAAAAEOk/s7mSQh3v_oo/bg-bubplastic-h-blue_thumb%5B3%5D.gif) top right no-repeat;
   }

3. Simpan Template.
4. Masuk Ke Elemen Halaman.
5. Klik Tambah Gadget pada bagian sidebar.
6. Pilih yang HTML/Javascript, kemudian masukkan kode berikut kedalamnya :

   <div class="menu bubplastic vertical blue">
       <ul>
           <li><span class="menu_r"><a href="http://justforfun-adrianrivald.blogspot.com/" target="_self"><span class="menu_ar">About</span></a></span></li>
           <li><span class="menu_r"><a href="http://justforfun-adrianrivald.blogspot.com/" target="_self"><span class="menu_ar">Contact Us</span></a></span></li>
           <li><span class="menu_r"><a href="http://justforfun-adrianrivald.blogspot.com/" target="_self"><span class="menu_ar">Advertiser</span></a></span></li>
           <li><span class="menu_r"><a href="http://justforfun-adrianrivald.blogspot.com/" target="_self"><span class="menu_ar">Banner</span></a></span></li>
           <li><span class="menu_r"><a href="http://justforfun-adrianrivald.blogspot.com/" target="_self"><span class="menu_ar">Link</span></a></span></li>
       </ul>
       <br class="clearit" />
   </div>

7. Simpan.

Yang harus diganti adalah tulisan yang berwarna hijau dan merah. Selamat mencoba !

sumber:miscah.blogspot.com