How To Add Blogger Vertical Stylish Css3 Side Menubar

Earlier i posted About  about How ToAdd Cool Vertical Drop Down Menu ForBlogger. Its also include nice style withdrop down.You can follow this easy steps to add it to your blog.

1. Log in to blogger  Design > Edit HTML.

2. Find this tag by using Ctrl+F   ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

#hor {
list-style:none;
padding:0;
margin:0;}
#hor li {
float:left;
padding:5px;}
#hor a {
display:block;
height: 12px;
text-indent:-999em;}
#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;}
#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;}
#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;}
/* CSS Style for Vertical Menu */

#ver {
list-style:none;
padding:0;
margin:0;
}
#ver li {
padding:2px;}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
}
#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}


.clear {
clear:both;
}


*{
/* A universal CSS reset */
margin:0;
padding:0;
}


#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;


/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI6QnbFqJ5aUTa4KX_L-eeE9f-pm-SBOc4HDV6H1Oda7lt4ZKknNJAyZnswCGF32i8uIpVt-6gKGRnFXHrSTA4MwqHyusqY_0o4MlBdIlfez7pe4oFr8Q_HwO8p__3F3vhE9M6cpisOS5m/s1600/navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

4. Now Go to Design >  Page Element.

5.Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://www.bloggertrix.com">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href="http://www.bloggertrix.com">
<span>About Us</span>
</a>
</li>
<li>
<a class="categories" href="http://www.bloggertrix.com">
<span>Categories</span>
</a>
</li>
<li>
<a class="services" href="http://www.bloggertrix.com">
<span>Disclaimer</span>
</a>
</li>
<li>
<a class="contact" href="http://www.bloggertrix.com">
<span>Contact</span>
</a>
</li>
</ul>
</div>

Replace http://www.bloggertrix.com with your Links

7. Now save your HTML/Javascript'.
    You are done...