cara buat menu vertikal

1. Login to blogger then choose "Layout-->Edit HTML"
2. Put the script below before this code ]]> or put it in CSS code area.

.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%; }

You can change the menu color, look at the red text (blue1.gif and blue2.gif). Change it with some color menu below. For example, if you want to choose red color, then the code would be like this :

.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');


Vertical Menu Color :



blue1.gif

blue2.gif


green1.gif

green2.gif


red1.gif

red2.gif


pink1.gif

pink2.gif


black1.gif

black2.gif


3. Save your template.
4. Then go to "Page Elements" menu
5. choose "Add a Gadget -->HTML/JavaScript" the insert the code below.


&It;ul id="verticalmenu" class="glossymenu">
&It;li>&It;a href="/">Home&It;/a>&It;/li>
&It;li>&It;a href="http://trik-tips.blogspot.com">Trik Blog&It;/a>&It;/li>
&It;li>&It;a href="http://x-template.blogspot.com" >Free Template&It;/a>&It;/li>
&It;li>&It;a href="http://getebook.co.cc">Free Ebook&It;/a>&It;/li>
&It;/li>
&It;/ul>

Posted in: Trik bloging