Home » Blogger Tutorials, Tricks and Hacks » Blogger Tricks » How to add CSS3 and jQuery Lavalamp Menu Widget

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How to add CSS3 and jQuery Lavalamp Menu Widget

How to add CSS3 and jQuery Lavalamp Menu Widget

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,506 views

A very nice widget that you can add to your Blogger is the fancy CSS3 and jQuery lavalamp menu. The menu is designed by Indesign and is translated to Blogger by Rahul Ippar of Helper Blogger,  who shows us how to do it.

Here are the following steps:

Step 1: Adding Scripts and Styles

1. Go to Blogger Dashboard > Template

2. Click Edit HTML > Proceed

3. Find this code

</head>

4. Add the code below just above </head>

<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

5. Search for

]]></b:skin>

6. Add below code before ]]></b:skin>

/*LAVALAMP MENU BY http://www.helperblogger.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;

}

7. Hit Save.

Step 2: Adding Menu

1. Go to Page Layout > Add a Gadget

2. Select HTML/JavaScript

3. Copy this code inside HTML/JavaScript

<div>

<ul>

<li><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></div>

</div>

Note: Change # with links; Change Home, About, Blog. etc. with your preferred link text. If you want to customize the color background, simply replace <div class=”lavalamp dark”> with the following color codes:
<div class=”lavalamp magenta”>
<div class=”lavalamp cyan”>
<div class=”lavalamp yellow”>
<div class=”lavalamp orange”>
<div class=”lavalamp dark”>

4. Save.

Note: Always back up your template before doing any changes.

Liked It ? Please Share

Comments

2 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Nice post. I discover some thing much more challenging on various blogs everyday. It will often be stimulating to read content from other writers and practice somewhat some thing from their store. I’d prefer to make use of some using the content on my weblog regardless of whether you do not mind. Natually I’ll give you a link on your internet blog. Thanks for sharing.

    red bottoms christian louboutin]

  2. Souno says:

    Very nice and amazing menu. Thanks

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here