Floating Bubble Menu For Blogger In 6 Styles

MADE by http://www.spiceupyourblog.com
I Guess most custom templates already have a menu and templates from the template designer have tabs enabled which will turn a link list or page list into a menu.However i knew i wanted to cover the jQuery lava lamp or floating bubble menu as it is seriously cool, interactive and i have not seen it on any Blogger blog.The lava lamp menu has an effect you may have seen on other websites, a bubble is visible behind the first link title (Usually Home) on the menu and when you place your cursor over another link title the bubble slides up to that link.It looks awesome and as ever the use of jQuery makes it possible and smooth.As an extra bonus we have this effect added to 6 different color styles of menu you can quickly add to your blog !

Lets look at the demo, as the menu uses Css3 if you use older versions of Internet Explorer the effect wont look as good although it will still work without the bubble.Do your self a favor and get Firefox Or Chrome.

Add The Lava lamp Floating Bubble Menu To Blogger

Step 1. To Start this Blogger tip from your Dashboard Click Design > Edit Html

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):

]]></b:skin>

Step 3. Copy And Paste The Following Code Directly Above / Before ]]></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.spiceupyourblog.com */

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):

</head>

Step 5. Copy And Paste The Following Code Directly Above / Before </head>

Note - If you have added jQuery to your template previously you don't need the code in green just the second snippet will do.

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

Now go to your blogs Design Page, we will be adding the menu across your blog below the header.This area is called Cross Column and can be see in the image below.

OK so we now all have the cross column section for the menu.

Add The Menu Html

In your blogs Design Page click Add A Gadget > Choose Html/Javascript > Choose Your Code From Below and Paste it into the Html/Javascript Gadget.

This is the code that makes up the default menu, that's white background.

<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 - Simply Place The Link were it has Link-Here and change the names of the links from About, Blog, services and so on.To add 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 yo your template in Step 2 allows for any of the 6 colors to work and all you have to do 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 added and you color choosen save the Html/Javascript gadget and make sure it's below the header in the cross column section.

Template Designer Tabs Fix

If you use a template from the Blogger Template Designer there is a section of Css that will effect this or any menu you place in the cross column section. OK that's it another great Blogger Tip, it seemed to have a lot of steps but this was just so people of all levels could understand.Check out more of our Css Design Tips.