Fancy CSS3 & jQuery Lavalamp Menu For Blogger

Hi, today I’m going share about jQuery and CSS3 menu bar for blogger, I’m shared more different menu bars, drop down, vertical drop down, with CSS3 and its more effective to your blog. I told that I’m using jQuery and CSS3 this is first time with using JQuery in menu bar and it is so nice. There are six effective colors to match your blog color

 How to add this menu to blogger For understanding easily I’m divided the tutorials and they are below 

Step1: Adding scripts
Step2: Adding style
Step3: Adding the menu


1. Adding scripts

1. Go to Blogger Dashboard >Template

2. Click on Edit HTML

3. Hit Proceed
4. Find the below code in your template
    To find the code Press CTRL+F and type this code
5. Add below code just above it (if you already add Jquery library for your blog then ignore the jQuery file script).


 2. Adding styles 


1. Now find the Below code


  ]]></b:skin>


2. Add below CSS code before the code(tag)


.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; height: 18px; font-family: calibri; } .magenta { background : rgb(190,64,120); border: 1px solid #841144; } .cyan { background : rgb(64,181,197); border: 1px solid #2f8893; } .yellow { background : rgb(255,199,79); border: 1px solid #c08c1f; } .orange { background : rgb(255,133,64); border: 1px solid #c04f11; } .dark { background : rgb(89,89,89); 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; background : rgba(0,0,0,.20); -webkit-transition: all .4s ease-in-out; }


3. Now save your template In style there are two methods for adding, one shown above and the other one is add from customize menu to add style like this type follow these steps
1. Go to Blogger template and click on customize
2. Click on Advanced and scroll down click Add CSS
3. Paste the code in that window and save it

 3. Adding menu 


1. Now come to page layout (above the template option)
2. Click on Add a Gadget(below the header )4
3. choose the HTML/JavaScript
4. Copy and paste the below code inside it



  <div class="lavalamp cyan"> <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> </ul> <div class="floatr"> </div> </div>

5.  Save your JavaScript file
 • Replace # with the links
 • Replace home, blog, contacts etc. with your link text which you want to appear on the menu bar
 • If you want change the background color of the menu then replace


<div class="”lavalamp" dark="">


one with below code line