New jQuery Lavalamp Floating Bubble Menu For Blogger In 6 Colors

From the starting of Tekleisure i really don't concentrate on Menu bar's for blogger because i think mostly all Custom templates comes with attractive Navigation menu bar's and Blogger default templates also have Navigation menu bar's, but after getting some replies from readers through e-mail i realized many of you don't like default Navigation menus of your template and you want to change your old menus.So i take some new Navigation menus just for all of you.However i knew, i wanted to cover the jQuery Lavalamp or floating bubble menu as it is seriously cool, interactive as i have not seen it on any other blogger blog.The new Lava lamp navigation menu have an effect which you ever seen on websites that a bubble is on first Link (Usually Home) and when you move your cursor to any other link the bubble slides upto that link.It looks awesome and as ever the use of jQuery makes it possible and smooth.

I created these navigation menu's in 6 different colors pick one which is exact match with your blog.For a live demo click on the image below and lets have a look of how these navigation menu's work.

Adding The lava Lamp Floating Bubble Menu To Blogger

Before making any changes in your Blog's HTML first backup your template-How to Backup your template

Step 1.) Go to your blogger Dashboard and click On design > Edit HTML

Step 2.) find the following piece of code in your Blogs HTML (Press CTRL + F for search bar for helping in finding the code)

]]></b:skin>

Step 3.) Copy and paste the following code Above/Before the searched code ]]></b:skin>

/*LAVALAMP 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;
}

.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);

}


a {
text-decoration: none;
color: #262626;
line-height: 20px;
}

ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}

ul li {
list-style: none;
float:left;

text-align: center;
}

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;
}
/*End Lavalamp Css Info @ http://www.tekleisure.blogspot.com */

Step 4.) Now find the following piece of code in your blog's HTML (Press CTRL + F for search bar for helping you in finding code)

</head>

Step 5.) Now place the following code directly Above/Before the code </head>

If you already added jQuery code in your Blogger template then you don't need to add the line in green color, just add the second snippet.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

<script src='http://spiceupyourblogextras.googlecode.com/files/lavalamp.js' type='text/javascript'/>

Step 6.) Save your Template.

We are now nearly finish, this the jQuery and Css  which we added in blog's HTML, now we have to add the links code in a cross column section which always located below the header of your blog.For adding the cross column gadget below header click on Add a Gadget and then select HTML/Javascript widget.

Now Add The HTML Menu Links

In your Blog's Design click on The Add a Gadget > Choose HTML/Javascript and then paste the below code in your HTML/Javascript widget.

<div class="lavalamp" >

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

Add Your Links: Before saving the Gadget give it 1 minute and add your links and change the name of the links.To add the extra links just paste the following code below the last one.

<li><a href="Link-Here">Name-Here</a></li>

Use any Of the 6 colors

The Css you added in your template in Step 2 allows the any of the six colors to work and all you have to is the name of the color.If you look at the first line of HTML above that i have highlighted in yellow it is this.

<div class="lavalamp" >

Leave it like that to use the white menu and change it to include your color.

<div class="lavalamp magenta" >
<div class="lavalamp cyan" >
<div class="lavalamp yellow" >
<div class="lavalamp orange" >
<div class="lavalamp dark" >

Once you have your links and color added which you have choosen save the HTML/Javascript gadget and make sure its below the header in the cross column gadget. 


Drop Your Suggestions And Comments Below.