Fancy CSS3 & Jquery Lavalamp Menu For Blogger
I Have Shared two jQuery Menus on ProBlogger so Far First one was Smooth jQuery Drop Down Menu Version 1 and Second one was Version 2. This time I Am Sharing an amazing CSS3 & jQuery Lavalamp menu and as mentioned in title it works with CSS3 And jQuery. You can use this menu in 6 colors by just Changing a word in the HTML Code.This Menu is designed by and i have bloggerized it to works perfectly with any blogger.
How To Add This Menu To Blogger
For Easy Understanding I am Dividing the toturial in three parts They are s below .
* Adding Scripts .
* Adding Styles .
* Adding The Menu .
1. Adding Scripts .
* Go To Blogger Dashboard . Template .
* Click On Edit HTML .
* Hit Proceed .
* Find Below Code In Your Template
</head>
Add Below Code just above it. If You Have Already Added a jQuery Library 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="http://code.helperblogger.com/lavalamp-menu.js" typ
e="text/javascript"></script>
2 Adding Styles .
Now Find Below Code .
]]></b:skin>
Add Below CSS Code Immediately Before it .
/*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;
}
/*LAVALAMP MENU BY http://www.helperblogger.com/ END*/
. Now Save Your Template .
3. Adding The Menu .
Now Come To Page Layout .
* Now Come To Page Layout .
* Click Add a Gadget Below Header .
* Choose HTML/JavaScript .
* Copy And Past Below Code And Save It .
<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>
Replace # With The Links
Replace Home,about,Blog. etc with link text which you want to appear on the Menu .
If You Want To Change Bckground color of the menu then replace <div class="lavalamp dark"> with one of the code below .
<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark"?
Finally Save Your Widget And Your Done .
I Have Tried my Best To Keep this tutorial as easy as possible, if still you are getting any single problam then feel free Share it bellow via comments .
Fancy CSS3 & Jquery Lavalamp Menu For Blogger
Posted by Unknown
No comments
I Have Shared two jQuery Menus on ProBlogger so Far First one was Smooth jQuery Drop Down Menu Version 1 and Second one was Version 2. This time I Am Sharing an amazing CSS3 & jQuery Lavalamp menu and as mentioned in title it works with CSS3 And jQuery. You can use this menu in 6 colors by just Changing a word in the HTML Code.This Menu is designed by and i have bloggerized it to works perfectly with any blogger.
How To Add This Menu To Blogger
For Easy Understanding I am Dividing the toturial in three parts They are s below .
* Adding Scripts .
* Adding Styles .
* Adding The Menu .
1. Adding Scripts .
* Go To Blogger Dashboard . Template .
* Click On Edit HTML .
* Hit Proceed .
* Find Below Code In Your Template
</head>
Add Below Code just above it. If You Have Already Added a jQuery Library 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="http://code.helperblogger.com/lavalamp-menu.js" typ
e="text/javascript"></script>
2 Adding Styles .
Now Find Below Code .
]]></b:skin>
Add Below CSS Code Immediately Before it .
/*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;
}
/*LAVALAMP MENU BY http://www.helperblogger.com/ END*/
. Now Save Your Template .
3. Adding The Menu .
Now Come To Page Layout .
* Now Come To Page Layout .
* Click Add a Gadget Below Header .
* Choose HTML/JavaScript .
* Copy And Past Below Code And Save It .
<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>
Replace # With The Links
Replace Home,about,Blog. etc with link text which you want to appear on the Menu .
If You Want To Change Bckground color of the menu then replace <div class="lavalamp dark"> with one of the code below .
<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark"?
Finally Save Your Widget And Your Done .
I Have Tried my Best To Keep this tutorial as easy as possible, if still you are getting any single problam then feel free Share it bellow via comments .
_thumb%5B2%5D.png)
_thumb%5B1%5D.png)
_thumb%5B1%5D.png)
_thumb%5B2%5D.png)
_thumb%5B1%5D.png)
