Vertical CCS Menu With Rounded Corners For Blogger

I showed you how you can add attractive horizontal CSS menu  to your Blogger blog. It is meant to fit into the header or between header and post. If this does not suit the layout of your template you might want to add a vertical CSS Menu in the sidebar instead. In this post I am going to show you how you can do just that.


How to add an attractive CSS Menu with rounded corners to your Blogger blog

1. Login to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. Search for (Ctrl + F) the </head> tag. (Press CTRL+F for search tags)

3. Copy the following code and paste it just before the </head> tag.


<style type="text/css">
.rcornersmenu a {
width:250px;
display:block;
border: solid #666;
border-width: 0 1px;
text-decoration: none;
outline:none;
color: #000;
background: #e4e4e4;
}
.rcornersmenu a b {
display: block;
position:relative;
top: -1px;
left: 0;
border:solid #666;
border-width:1px 0 0;
font-weight:normal;
}
.rcornersmenu a b b {
border-width:0 0 1px;
top: 2px;
padding:1px 6px;
}
.rcornersmenu a:hover,
.rcorners a:hover b {background:#666666;color:#ffffff;}
.rcornersmenu ul,li {
list-style: none;
}
</style>


Note: You can change width, colors,... to your needs.

4. Save your template.

5. Now go to Design --> Page Elements and click on "Add a gadget".

6. Select "HTML/JavaScript", then add the code given below.


<ul class="rcornersmenu">
<li><a href="#"><b><b>Home</b></b></a></li>
<li><a href="#"><b><b>HTML</b></b></a></li>
<li><a href="#"><b><b>CSS</b></b></a></li>
<li><a href="#"><b><b>JavaScript</b></b></a></li>
<li><a href="#"><b><b>Advertise</b></b></a></li>
<li><a href="#"><b><b>About</b></b></a></li>
<li><a href="#"><b><b>Contact</b></b></a></li>
</ul>


7. Save.
That’s all!