Vertical Navigator Menu

Cara membuatnya :

Masuk menu Layout kemudian masuk menu Edit HTML.

Kemudian masukkan Code CSS dibawah ini diatas code ]]></b:skin>

/*Vertikal Menu ---------------------------------*/ .vertikalmenu{ list-style-type: none; margin: 0; padding: 0; width: 180px; /* lebar dari menu vertikal*/ } .vertikalmenu li{ border-bottom: 1px solid white; } .vertikalmenu li a{ background: #000000 ; /*warna dari menu vertikal*/ font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana; display: block; color: white; width: auto; padding: 5px 0; text-indent: 8px; text-decoration: none; border-bottom: 1px solid black; } .vertikalmenu li a:visited, .vertikalmenu li a:active{ color: white; } .vertikalmenu li a:hover{ background-color: #737373; /*warna setelah pointer diarahkan (hover)*/ color: white; border-bottom: 1px solid black; }

Perhatikan code yang berwarna merah dan kegunaanya, atur menurut selera. untuk mencari code warna buka situs www.colorhunter.com

Kalau sudah kemudian SAVE

Langkah berikutnya yaitu ke area Page Elements (tata letak)

Lalu pilih Area sidebar dan klik Add a Gadget 

Lalu pilih HTML/JavaScript dan taruh Code HTML dibawah ini kedalamnya

<ul class="vertikalmenu"> <li><a href="/">» HOME</a></li> <li><a href="http://tutorial1.blogspot.com">» Blog</a></li> <li><a href="http://tutorial2.blogspot.com">» Komputer</a></li> <li><a href="http:// tutorial3.blogspot.com">» HandPhone</a></li> <li><a href="http:// tutorial4.blogspot.com">» Software</a></li> <li><a href="http:// tutorial5.blogspot.com">» Hardware</a></li> </ul>

Ganti teks yang berwarna merah dengan URL link yang ingin dipasang, dan yang berwarna hijau adalah text display linknya.

Kalau sudah SAVE