In my previous tweak, I have shared to you on how to add Drop down menu and it is useful especially if you have many clutters that disturbed the eyes of your readers. Today , I will share a menu bar which I hve learnt across my research in the web. I believe you will find it more interesting than before.This trick uses an amazing CSS3 & jQuery lavalamp .You can use this menu in six (6) different colors by just changing the div class word in the HTML code.This menu is originally designed by Insidesigns and Helperblogger made it bloggerized to work perfectly with any blogger templates. With no so much word, let's us now go to the tutorial and see how to add this menu to your blogger blog.
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
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
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.
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.bloggingtipsandtrix.blogspot.com/ STARTS here*/C. You may now save your template
.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.bloggingtipsandtrix.blogspot.com/ ENDS here*/
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>
Customizations:
- 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">D. Click Save Arrangement
<div class="lavalamp magenta dark">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
