This is cool vertical menu. you can it to your blog as
side bar gadget. make your blog attractive.
Demo here
1. Log in to your blogger account and Go to Design >> Edit HTML
2. Put checked marked in Expand Widget Templates
3. Find this tag by using Ctrl+F ]]></b:skin>
4. Paste below code before ]]></b:skin> tag
/* vertical menu*/
#menu10 {
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 12em;
}
#menu10 li {
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#menu10 a {
background: #333;
border-bottom: 1px solid #393939;
color: #ccc;
display: block;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
#menu10 a:hover {
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR6QKOju6h26DN6SL3Vnz7FKxZEKp9DHGHOcjZYb9Vv5JOgYfgM_e6uRT5rObP1h3BFm0oYfXyBNz3C1wpl5edbueLMLS5bFHkHnlPznoTdG4NREg9o99JO5IrAe7MlnPt2peRstuMrI9w/s320/hover.gif") left center no-repeat;
color: #fff;
padding-bottom: 8px;
}
/* www.bloggertrix.com*/
5. Now Go to Design >> Page Element
6. Click Add Gadget and select 'HTML/Javascript'
7. Paste below one of below code.
<ul id="menu10">
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a></li>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Download</a></li>
</ul>
* Replace red #1 to #5 with your URL
* You can change Blue color words(Title) as your like.
10. Save it. you are done.
