Cool Vertical Menu For Your Blogger

 Cool Vertical Menu For Your Blogger
This is cool vertical menu. you can it to your
blog as side bar gadget.

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*/
*{
.outer5 a, .outer div, .outer li, .outer ul, .outer body{
 margin: 0;
 padding: 0;
 font-family: Verdana, Helvetica, Arial, sans-serif;
}
div.menu5{
 width: 258px;
}
div.menu5 ul{
 list-style: none;
 text-indent: 0px;
}
div.menu5 li{
 margin-top: 3px;
}
div.menu5 a{
 font: 12px Verdana;
 padding: 4px;
 color: #646464;
 display:block;
 padding: 6px 30px;
 height: 20px;
 text-decoration: none;
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaxaiOlSGrA5jzTUHAAyJoXmC_YenJ-2cUlK_ff5F3drGMsTjrIzlQ6z9EkEuQAwhG97uo4B2QkqX1HcfF5YkpIfgO_GlmVjWx1VWKdc2V7yrpe1NqMd3ajb-QHjf6o4RWfTN5vGA6-rWE/s1600/b1.gif');
}
div.menu5 a:hover{
 background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64o8HytOY8F9Y8eU425N3GZhOVewFjDexgo51QJWkxhWcqepv_YBhzbhBYbzd3nDs_zLI5gu3Dt_8og_DoXq_3i1JcDEP4f2tNtW5YjavbnKuBWNwLowIlF75R4rn18WuvSLxkDKp2BUA/s1600/h1.gif') no-repeat right;
 padding: 6px 40px;
}:148px;background:url() no-repeat;color:#b18211;}
/* 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.

<div class="outer5">
<div class="menu5">
 <ul>
   <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>
</div>
</div>

* Replace red #1 to #5 with your URL
* You can change Blue color words(Title) as your like.

10. Save it. you are done.