Create Vertical Menu (Vertical)

Vertical Menu is a menu in the or a vertical-shaped upright. Usually contain a link, such as Home, and so forth. Shaped like this:



If you want to make it, follow these steps:

1. Log in to Blogger and select Layout -> Edit HTML .
2. Find this code ]]></b:skin> or before the code </style>.

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

The note: the color blue. That you can select the color with the color that is available. If you want red, blue2.gif change the code so that it becomes red.gif be like this:

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

and

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

Color Options menu vertical:



blue1.gif

blue2.gif

green1.gif

green2.gif

red1.gif

red2.gif

pink1.gif

pink2.gif

black1.gif

black2.gif


3. Then save.
4. Go to Page Elements --> Add Gadget --> HTML/Javascript and enter the code to them:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://blogging-trick.blogspot.com">Trick Blogging</a></li>
<li><a href="http://www.google.com/adsense" >Google Adsense</a></li>
<li><a href="http://blogskins.com">Free Blog Template</a></li>
</li>
</ul>

Code green is the link, and the code blue is a wrapper link. If you want to add a menu to stay longer the same code as a blink.

5. Save.

Good Luck!