Menu Stylish Cố Định Vị Trí Thẳng Đứng Side Menu

Demo :


Bước 1. Trong Thiết kế tổng quan của bạn Click vào Blogger - > Thiết kế ->  Trình thiết kế mẫu  -> Nâng cao --> Thêm Css

Bước 2. Dán đoạn mã sau vào phần Css:
/* CSS Style for Horizontal Menu */
#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/AVvXsEgZg8-NlOI1G6qjUhLT7h-2d0WRPTIcqpr57rF2UZ3jhcjDVgo02QOHJdAgDPviXyu2vydRaG-WVOfL2nOEUji3kuSDgCFsWlQGo-YmAA8pxAZwSyMpMHO6rV3Bo8_LE6NHdHMSW3YN2ek/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;
}
/*End menu css  */ 

Bước 3.Lưu mẫu của bạn, đó là Css thêm cho html.

Bước 4. Quay trở lại trang blog Thiết kế Giao diện của bạn và nhấp vào Thêm Một tiện ích -> Html / Javascript --> HTML/Javascrip

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href=" http://www.vietcons.info/ ">
<span>Home</span>
</a>
</li>
<li>
<a class="about" href=" http://www.vietcons.info/p/about-spice-up-your-blog.html">
<span>About</span>
</a>
</li>

<li>
<a class="services" href=" http://www.vietcons.info /p/hire-us_08.html">
<span>Services</span>
</a>
</li>

<li>
<a class="portfolio" href=" http://www.vietcons.info /">
<span>Portfolio</span>
</a>
</li>

<li>
<a class="contact" href=" http://www.vietcons.info /2009/09/contact-us.html">
<span>Contact us</span>
</a>
</li>
</ul>
</div><a href=" http://www.vietcons.info /" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

Bước 6.Lưu các tiện ích và chỉnh sửa những màu xanh thành của bạn