How to make a vertical menubar

12:21 AM Posted by Anonymous

Here is a screenshot of what we are going to make:

Its very easy to make.Just follow below steps:
1.Login to your Blogger Dashboard--->Layout--->Edit HTML and backup your template.
2.Search for ]]></b:skin> in your template and paste the following piece o code before it:

#vertical-1{

border-bottom-width: 0;

}

#vertical-1 ul{

margin: 0;

padding: 0;

font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; /*pemilihan bentuk huruf */

}

#vertical-1 a{

display: block;

padding: 3px 0;

padding-left: 9px;

width: 200px; /* width of mrnu */

text-decoration: none;

color: #333222; /* this is the color of alphabet */

border-right:1px solid #000000;

background-color: #FBEC04;

border-bottom: 1px solid #6A6731;

border-left: 7px solid #918C3B;

}

#vertical-1 a:hover {

background-color: #FAF6B9;

border-left: 12px solid #918C3B;

width: 195px; /*lebar */

}

#vertical-1 div.menutitle{

color: white;

border-bottom: 1px solid #053E66;

padding: 5px 3px 5px 13px;

background-color: black;

width: 201px;

font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}

3.Now click save template and go to Page Elements>Add a Gadget>HTML/Javascript and add following code in it:

<div id="vertical-1">

<div class="menutitle">CSS Library</div> 

<ul>



<a href="http://killer-tricks.blogspot.com">Home</a>

<a href="http://killer-tricks.blogspot.com/">Verticle menu</a>

<a href="#">example</a>

<a href="#">example1</a>

<a href="#"></a>



</ul>

<div class="menutitle">Blogger</div> 

<ul>

<a href="#">Example2</a>

<a href="#">Example3</a>

<a href="#">Example4</a>

<a href="#">Example5</a>

<a href="#">Example6</a>

<a href="#">Example7</a>



</ul>

</div>

4.Now change the above links with your one and save the gadget and you are done...

Spl. Thanx to Nandu Patel[Admin-Thetricks.net]