Membuat Menu Vertikal Di BloG

Berikut ini saya akan membahas bagaimana cara membuat Menu Vertikal seperti gambar di samping,,,,,,

Pertama Login Dulu Ke blog sobat
Kemudian Pilih Tataletak => Edit HTML
Letakkan script berikut sebelum code

Pokoknya ditaruh di dalam Barisan kode CSS deh.

.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://blog.superinhost.com/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://blog.superinhost.com/vertical/blue2.gif'); } * html .glossymenu li { float: left; height: 1%; } * html .glossymenu li a { height: 1%; }

Untuk memilih warna menunya kamu tinggal mengganti url dibawah dengan url tempat gambar kamu disimpan seperti di bawah ini yang tulisan berwarna merah itu adalah warna gambarnya dan alamatnya adalah http://blog.superinhost.com/vertical/red.gif nah kamu tinggal ganti url tersebut...dan ingat urlnya harus diganti karena kami tidak menyediakan backgroundnya gambarnya untuk saat ini, mudah koq tinggal buat gambar sendiri bisa pake photoshop dkk.

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Kemudian Simpan,,
Lalu pergi ke Elemen laman => Tambah Gadget => HTML/JavaScript
Kemudian masukkan code berikut di dalamnya :

<ul id="verticalmenu" class="glossymenu"> <li><a href="/">Home</a></li> <li><a href="http://olencz.blogspot.com">Trik Blog</a></li> <li><a href="http://x-template.blogspot.com" >Free Template</a></li> <li><a href="http://chaliel_rachman.blogspot.com">Blogger Hack</a></li> </li> </ul>