Make Vertical Menu bar in blogger

1. Sign in to blogger with your ID.
2. Click Layout tab.
3. Click Edit HTML tab.(Don’t forget to back up your template.)
4. Copy and paste the code below at above of ]]></b:skin>

#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;
}

5. Save template
Now first part is complete.

6. Click Layout
7. Then, Click Page Element
8. Click Add gadget and click HTML/JavaScript.
9. Copy and paste the code below in to the element.

<div id="vertical-1">
<div class="menutitle">CSS Library</div> <!-- this is the 1st title -->
<ul>
<!-- Please alter with your links -->
<a href="http://indianmonsters.blogspot.com">Home</a>
<a href="http://indianmonsters.blogspot.com/">Verticle menu</a>
<a href="#">example</a>
<a href="#">example1</a>
<a href="#"></a>
<!-- add any links here -->
</ul>
<div class="menutitle">Blogger</div> <!-- this is the 2nd title -->
<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>
<!-- add any links here -->
</ul>
</div> <!-- end off vertical-1 menu -->