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/AVvXsEiNkX2coFGXbKcF6mSk3WkKAFrh5d5mfIr62VvKZW4Uvi6U9KCbsSmqJn815hYYcoH4dehv7P5Tkk0NH-GYKRNoyiio5sqZJw6SPsM5ZHnj6J9EuorBZ1LauR9AdICwnBfRNqjSjQmy1bQ3/s1600/b1.gif');
}
div.menu5 a:hover{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc-javb0b-UHOBbhjFLmA65RrwGLcvkBl73hdzl4SaFUqEwI0hqg950FjqrWl4LFLELYO1R1bOJJPG79UkO3DyVuB7s3AesHvFFcZe2epYpa3DKnOeaiDIesDigDMpCj4o4d8yGyIs6x9-/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.
