Beautiful JQuery Lavalamp Floating Bubble Menu For Blogger In 6 Styles ( stiluri de meniu blogger )

Add The Lava lamp Floating Bubble Menu To Blogger

[DEMO]

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.

That's the Css and jQuery added next is to add the html for your menu.

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.If your blog does not have this section available you can see how to enable it here.

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.This is called tabs and you will need to remove or over ride the tabs css.

[sursa]