How to Blog | How to Add The Fixed Navigation Menu To Blogger

01. Log in to your blogger 'Dashboard'.

Click on Design

02. Click on the tab 'Design'.
03. Click on the 'Template Designer'.

Click on Template Designer

04. Click on 'Advance'.
05. Click on 'Add CSS' on the end.

Click on Advance and Click on Add CSS

06. Copy and Paste the below script onto the CSS section:


/* CSS Style for Horizontal Menu - info @ http://www.spiceupyourblog.com*/
#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/AVvXsEhEmmJPZv9djHDdfU3PAZb9NSMYrcRjZRrv1psy2aEDbLDJrhnmsiYJsxoFGv_CrX6fPR0KoRyQweCEhujUPm-F8-usDkXUTbyC6gG8opwkBVVGcjF56jBJKAEvwK8fSL_MxAHiqlW7GUo/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 - info @ http://www.spiceupyourblog.com */
07. Save your template.
08. Go to 'Design' again.
09. Click on 'Add a Gadget'.

Click on 'Add A Gadget'

10. Click on 'HTML/JavaScript' from the new window.
11. Copy and Paste the following code to the coming box and then save.
       <div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://www.spiceupyourblog.com">
<span>Home</span>
</a>
</li>

<li>

<a class="about" href="http://www.spiceupyourblog.com/p/about-spice-up-your-blog.html">
<span>About</span>
</a>
</li>

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

</li>

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

<li>
<a class="contact" href="http://www.spiceupyourblog.com/2009/09/contact-us.html">

<span>Contact us</span>
</a>
</li>
</ul>
</div><a href="http://www.spiceupyourblog.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>