I have shared two jQuery menus on HelperBlogger 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 Inside signs and I have
bloggerized it to works perfectly with any blogger blog.Now lets go to the
tutorial and see how to add this menu to blogger blog.
How
To Add This Menu TO Blogger?
For easy understanding I am dividing the tutorial in
three parts & they are as 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 to 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"
type="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 on Add a Gadget (Below Header)
Choose HTML/JavaScript
Copy and paste below code inside 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 your link text which
you want to appear on the menu.
If you want to change background 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 you are done.
I have tried my best to keep this tutorial as easy as
possible,if still you are getting any single problem then feel free to share it
below via comments,I will try to give reply as soon as time allows.
Peace and Blessings Buddies :)
0 comments:
Post a Comment