Cara Membuat Menu Vertikal

sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah Ndek chika )hick hizk hick ... Beginilah cara membuatnya :

Type Pertama ( Caranya )

• Login ke blogger trus pilih "Layout-->Edit HTML"
• Masukkan kode berikut sebelum kode ]]></b:skin>
• biar cepat carinya tekanctrl+f
  <style type="text/css">body .glossymenu, .glossymenu li ul{ list-style-type: none; margin: 0; padding: 0; width: 185px; /*WIDTH OF MAIN MENU ITEMS*/ border: 1px solid black; } .glossymenu li{ position: relative; } .glossymenu li a{ background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left; font: bold 12px Verdana, Helvetica, sans-serif; color: white; display: block; width: auto; padding: 5px 0; padding-left: 10px; text-decoration: none; } .glossymenu li ul{ position: absolute; width: 190px; left: 0; top: 0; display: none; } .glossymenu li ul li{ float: left; } .glossymenu li ul a{ width: 180px; } .glossymenu li a:visited, .glossymenu li a:active{ color: white; } .glossymenu li a:hover{ background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif'); } * html .glossymenu li { float: left; height: 1%; } * html .glossymenu li a { height: 1%; }
• Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif)
• Ganti kode tersebut dengan pilihan warna dibawah ini.
• Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini
  <style type="text/css">body :

  .glossymenu li a{ background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;
• dan
  <style type="text/css">body .glossymenu li a:hover{ background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');
• Kemudian di save.
• Lalu pergi ke menu "Page Elements"
• Pilih "Add a Gadget -->HTML/JavaScript"
• kemudian masukkan kode berikut kedalamnya:
  <style type="text/css">body <ul id="verticalmenu" class="glossymenu"> <li><a href="/">Menu</a></li> <li><a href=" http://chikaaza88.blogspot.com"> Target Link</a></li> <li><a href="http://chikaaza88.blogspot.com" >Tardet Link</a></li> <li><a href="http://chikaaza88.blogspot.com">Target Link</a></li> </li> </ul>
  • Kode yang berwarna MERAH adalah linknya
  • dan yg warna kuning adalah teks yang ditampilkan
  • Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.
  • Dah gitulah caranya sobat semuanya . Gampang kan kang mas mbak yuuu ????
  • Selamat Mencoba, Good Luck