Search
Latest topics
Who is online?
In total there are 2 users online :: 0 Registered, 0 Hidden and 2 Guests None
Most users ever online was 50 on Mon Apr 12, 2021 4:46 pm
Social bookmarking
Most Viewed Topics
Top posting users this week
No user |
Like/Tweet/+1
BOOKMARK US
Fancy CSS3 & jQuery Lavalamp Menu For Blogger
Page 1 of 1
Fancy CSS3 & jQuery Lavalamp Menu For Blogger
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 {
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;
}
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.
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 {
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;
}
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.
Similar topics
» jquery pop up like box for blogger
» FB LIKE BUTTON FOR BLOGGER POSTS
» remove subscribe to posts in blogger
» Change Blogger Mouse Cursors trix
» Static Follow By Email Pop Out Widget for Blogger
» FB LIKE BUTTON FOR BLOGGER POSTS
» remove subscribe to posts in blogger
» Change Blogger Mouse Cursors trix
» Static Follow By Email Pop Out Widget for Blogger
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
|
|
Thu Oct 03, 2013 12:36 am by Admin
» Dish Network Channel Starz, aim my dish network dish
Thu May 16, 2013 10:02 am by latinnoc
» Dish Network Little Elm Tx & dish network via broadband
Wed May 15, 2013 3:37 pm by latinnoc
» Dish Network Moving Promotions
Wed May 15, 2013 3:06 pm by latinnoc
» Dish Network Twc Channel - what channel is fox 1 on dish network
Wed May 15, 2013 9:00 am by latinnoc
» 005 Error Dish Network
Wed May 15, 2013 8:43 am by latinnoc
» Weta Kids Dish Network
Tue May 14, 2013 3:21 pm by latinnoc
» Dish Network In Augusta Maine
Tue May 14, 2013 2:44 pm by latinnoc
» hack torrent for increase speed using trackers
Thu Apr 11, 2013 4:09 pm by Fauriza