Earlier in this blog we have discussed about various types of Menus styles as mentioned list below for ready reference. Now in this Blogger Tutorial you'll learn about adding of supportive “CSS3 & jQuery Lavalamp menu style” for blogs. Around 6 types of colors code styles available in HTML code. Actually this Menu well designed by Insidesigns and BlogaTariff customized in effective style for its valuable readers/Visitors. Webmasters no need work hard this menu style matches for all types of blogs. Let’s begin the tutorials.
You may also like these below Related Articles
1. How to Add "Floating Menu (Spoiler) version-1?
2. How to Add "Vertical Drop Down Menu"?
3. How to Add "Mashable Dropdown Navigation Menu"?
4. How to Add "Animated Cloud Tag List Menu"?
5. How to Add "Lavalamp Menu with CSS3 and jQuery"?
How to Add “Lavalamp Menu with CSS3 & jQuery for Blogger?
Step one
Sign into your blogger accountClick on “EDIT HTML” link tab
(Before your do implement this experiment on your blog backup your template if anything goes wrong you can reuse it again)
Before you start step one check the below code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>If you finds the above code then proceed to paste the below code after to it.
<script src="http://blogtariff.googlecode.com/files/lavalamp-menu.js" type="text/javascript"></script>
Or else
If you don’t find the code <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> code in your template then proceed the below procedure
Now, search for code
</head>After finding code copy the below code and paste above to it
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogtariff.googlecode.com/files/lavalamp-menu.js" type="text/javascript"></script>
Step Two:
Now Search for code]]></b:skin>After finding code copy the below code and paste above to it
/*LAVALAMP MENU BY http://www.blogtariff.com.com/ START*/After successful adding the above code “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.blogtariff.com/ END*/
Step Three:-
Go to “Design” (Layout in the new blogger interface) Page elements link tabClick on “Add a Gadget” link tab
Select “HTML/Javascript” widget
Copy the below code and paste in 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>
Customization:-
- After pasting the above code in the widget now alter few tags as below
- Change “#” with your page URLs
- Change “Home, About, Blog, etc., with your page URLs as desired to appear on Menu
- If need to change the Menu background color then change <div class="lavalamp dark">
<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark">
Before you save the widget check once if any URL gone wrong. After successful altering code now “Save the Widget”
That’s you’ve done.
Please share with us if you feel any type of difficulty for adding the above menu to blogs.
Post a Comment Gmail ID Facebook
Do not Try to Add Spam Comments