Cara Membuat Vertikal di blog

cara membuat menu vertikal nha mari kita buat menu vertikal. menu vertikal ini akan cocok kalau di pasang 
di sidebar karena bentuknya berjajar sevara vertikal contoh seperti pada
screen shoot di bawah : 

Untuk membuatnya ikuti langkah langkah berikut

1. Login ke blogger terus pilih " Layout --> Edit HTML "
2. Masukan kode berikut sebelum kode ]]></b:skin>
   Atau taruh di dalam barisan kode CCS

.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 Biru

( blue1.gift dan blue.2 gift ) ganti kode warna tersebut dengan warna di

bawah ini

.glossymenu li a{

background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;

Dan

.glossymenu li a:hover{

background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');

 3. Kemudian di save

 4. Lalu pergi ke Menu " Page Elements "

 5. Pilih " Add Gadget --> HTML/javaScript kemudian masukan kode berikut

kedalamnya

<ul id="verticalmenu" class="glossymenu">

<li><a href="/">Home</a></li>

<li><a href="http://singgihsii.blogspot.com">Trik Blog</a></li>

<li><a href="http://x-template.blogspot.com" >Free Template</a></li>

<li><a href="http://getebook.co.cc">Free Ebook</a></li>

</li>

</ul>

Posted in: mempercantik blog