Beautiful Jquery LavaLamp CSS3 Navigation Menu Bar

How To Add Beautiful Jquery LavaLamp CSS3 Navigation Menu Bar For Blogger

1. Log in to blogger account and Go to Design,Edit HTML
2. Find this by using Ctrl+F </head>
3. Paste below code Before </head>

*Add below code just above it,(If you have already added a jQuery to your blog then delete the highlighted code)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src='https://googledrive.com/host/0B58fhAmOxE7EYXRSUGYzWHhrYU0' type='text/javascript'></script>

4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>

/*LAVALAMP MENU BY http://www.bloggersstand.blogspot.com/ START*/
.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}
.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;

}
.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;

}
.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;

}
.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;

}
.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;

}
.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}
.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}
.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}
.lavalamp ul li {
    list-style: none;
    float:left;
    text-align: center;
    }
.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }
.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}
/*LAVALAMP MENU BY http://www.bloggersstand.blogspot.com END*/

6. Go to blogger and click Layout
7. Click Add Gadget and select HTML/Javascript
8. Paste below code

<div class="lavalamp dark">
 <ul>
  <li class="active"><a href="">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Back to Article</a></li>
  <li><<a href="#">How it Works?</a></li>
 </ul>
 <div class="floatr"></div>
</div>

*To Change background Color Of The Navigation Menu Bar,Change <div class="lavalamp dark">   with one of the below code.

<div class="lavalamp orange">

<div class="lavalamp magenta">

<div class="lavalamp yellow">

<div class="lavalamp cyan">

<div class="lavalamp">

*Change All # With Your Links.

9. Now save your HTML/Javascript',Done!

If you have any query regarding stylish unique jquery lavalamp css3 fancy style Navigation Menu Bar for blogger Feel free to ask,just drop your comment below.