CYBER-HEAVEN
PLEASE REGESTER IF U LIKE OUR FORUM

THANX FOR VISITING


IF U WANT TO MODERATE THIS FORUM

REGESTER AND POST 3 NEW TOPICS IN ANY CATEGORY

U WILL BE MADE THE MODERATOR
Search
 
 

Display results as :
 


Rechercher Advanced Search

Latest topics
» GET BEST AUDIO QUALTIY FROM YOUR WINDOWS PC
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

Who is online?
In total there is 1 user online :: 0 Registered, 0 Hidden and 1 Guest

None

[ View the whole list ]


Most users ever online was 16 on Sat Oct 19, 2013 9:25 am
Social bookmarking

Social bookmarking digg  Social bookmarking delicious  Social bookmarking reddit  Social bookmarking stumbleupon  Social bookmarking slashdot  Social bookmarking yahoo  Social bookmarking google  Social bookmarking blogmarks  Social bookmarking live      

Bookmark and share the address of CYBER-HEAVEN on your social bookmarking website

Top posting users this week

Like/Tweet/+1
BOOKMARK US

Fancy CSS3 & jQuery Lavalamp Menu For Blogger

Go down

Fancy CSS3 & jQuery Lavalamp Menu For Blogger

Post by Admin on Fri Oct 26, 2012 9:02 pm

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. pirat
avatar
Admin
Admin
Admin

Posts : 58
likes : 6
Join date : 2012-10-26

View user profile http://cyber-heaven.forumotions.in

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum