How to Add Fancy CSS3 & jQuery Lavalamp Menu For Blogger
Step 1. Adding the Script
A. Go to your Blogger Dashboard >> Template Click
B. Hit the Edit HTML button
C. Find or Control F the code below in your template
</head>
D. After finding the above code, place the code below code just above the code in Step 1 C.
<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>
If you have already added a jQuery library to your blog then delete the highlighted code in orange)
Step 2. Adding Cascading Style Sheet (CSS)
A. Look for the code below
]]></b:skin>
B. Add the following code below just above the code in Step 2 A.
/*LAVALAMP MENU BY http://www.mybloggersnipers.blogspot.com/ STARTS here*/
.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.mybloggersnipers.blogspot.com/ ENDS here*/
C. You may now save your template Step 3. Adding this widget on your blog A. Now go back to your Blogger Dashboard B. Click Lay-out button >> Add a Gadget. Choose HTML/JavaScript C. Copy the code below and paste it inside the empty space and drag it below Header section.
<div class="lavalamp dark">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Free Templates</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
<div class="floatr"></div>
</div>
Replace # with your (URL) link Replace Home, About, Contact. 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 dark">
<div class="lavalamp magenta dark">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
D. Click Save Arrangement
Take Care Friends!
