Pure CSS3 Black Vertical Menus for Blogger / Websites

In this tutorial we will create a HTML/CSS based vertical Menus ->
I recently came across a great looking set of navigational buttons designed by Orman Clark of Premium Pixels. I'm a big fan of his design style and decided to whip together a quick CSS3/HTML version of the buttons. I have decided to make these menus available for Blogger Platform as well .

Installtions

•  Go to blogger dashboard
•  open layout
• add a new widget
• HTML/Javascript
• Copy the Below code there

<style>
/* Vertical List: */
.vertical-list {
    list-style: none;
    padding: 10px;
    width: 200px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #20282D; /* old browsers */
    background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
    -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
.vertical-list .button {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #515B62; /* old browsers */
    background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147',GradientType=0 ); /* ie */
}
.vertical-list .button:hover {
    background: #5F6B72; /* old browsers */
    background: -moz-linear-gradient(top, #5F6B72 3%, #56646C 4%, #4D5A62 50%, #434D54 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#5F6B72), color-stop(4%,#56646C), color-stop(50%,#4D5A62), color-stop(100%,#434D54)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5F6B72', endColorstr='#434D54',GradientType=0 ); /* ie */
}
.vertical-list .button:active {
    padding: 5px 12px;
    top: 0;
    background: #515B62; /* old browsers */
    background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#515B62), color-stop(5%,#444E55), color-stop(100%,#394147)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147',GradientType=0 ); /* ie */        -moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
    -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
}

</style>
<ul class="vertical-list">
    <li><a href='/' class='button'>Home</a></li>
    <li><a href='/' class='button'>Our Studio</a></li>
    <li><a href='/' class='button'>Portfolio</a></li>
    <li><a href='/' class='button'>Our Team</a></li>
    <li><a href='/' class='button'>Get in Touch</a></li>
</ul>

• Save the Widget.

all other gradients and effects are done with CSS3. As a result, compatibility is limited to a handful of browsers, including Firefox, Chrome, Safari and possibly IE8. It looks strange in IE7 and the gradients don't work in Opera, so I'd use caution if you're considering using these in a production environment.

Thanks