Cara pasang Jquery lava-lamp navigation menu

Untuk memasang jquery lava-lamp navigation menu (klik untuk demo), ikut beberapa langkah di bawah.

Salin dan paste kod di bawah pada HTML/Javascript(rujuk gambar dibawah).


<style>
#container {
width: 100%;
margin: 0px 0px;
padding: 0px 0px 40px 10px;
}

ul, li {
margin: 0; padding: 0;
}

#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 5px #011331;
-webkit-box-shadow: 2px 3px 5px #011331;
}

#lava-lamp {
background: #32312E;
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 15px;
padding: 8px 430px 10px 0px;
}

#lava-lamp li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 0px solid #4a4a4a;
}

#lava-lamp li a {
color: #DDDCD8;
text-shadow: 0 0px 1px #81807B;
position: relative;
z-index: 2;
float: left;
font-size: 13px;
font-family: arial, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 0px 20px;
}
</style>

<div id="container">

<ul id="lava-lamp">
<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>
<li><a href="http://link-di-sini.blogspot.com">About</a></li>
<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>
<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>
<li><a href="http://link-di-sini.blogspot.com">Contact</a></li>
</ul>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.spasticNav.js"></script>

<script type="text/javascript">
$('#lava-lamp').spasticNav();
</script>



p/s:

1.Untuk mengubah warna button, edit kod yang di bold berikut.
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));

2.Untuk mengubah warna background, edit kod yang di bold berikut.
background: #32312E;

3.Untuk mengubah URL dan Title, edit kod yang di bold berikut.
<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>

<li><a href="http://link-di-sini.blogspot.com">About</a></li>

<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>

<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>

<li><a href="http://link-di-sini.blogspot.com">Contact</a></li>

3.Untuk mengubah jarak background (rujuk gambar di bawah), edit kod yang di bold berikut.
padding: 8px 430px 10px 0px;




{ 36 comments.. read them below or add one }

Nescafe aisNescafe ais 5:00 PM
@amoi

Dah boleh install klik untuk komen tu :DD
amoi amoi 5:14 PM
@Nescafe ais dah boleh dah :DD

thanks again!
Hadi Cemas Hadi Cemas 5:29 PM
dia punya lebar terlebih la pulak antara kiri dan kanan ada lebih sedikit , macam mana nk tukar ?
Nescafe ais Nescafe ais 5:34 PM
@Hadi Cemas

cari kod ni

#lava-lamp {
background: #32312E;
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 15px;
padding: 8px 430px 10px 0px;
}

Edit 430px. Kurangkan angkanya. Contoh 200px.
jeera jeera 7:17 PM
link tu link ape and mane nak dapat? huhuhu
Hadi Cemas Hadi Cemas 8:14 PM
@Nescafe ais

err ~ maksud saya dia terlebih bahagian kiri ~
iza iza 9:16 PM
Menarik ni....
Bila kelapangan nk cuba jgk la....
HaFizRahMaN.com HaFizRahMaN.com 1:29 AM
nak place kat mna????klw letak kat sidebar...dia naik kat sidebar....kna masuk dalam edit html x?
epin jenal epin jenal 9:36 PM
apsal mcm ade background kaler pich kat belakang huruf?
apis apis 12:45 AM
@jeera link tu list link yg awk nk letak la.contoh, HOME ke, FACEBOOK awk ke, and ape2 jelah. cara nk dapat link tu,bukak je web yg awk nak letak pastu copy la link dia kt browser tu.hu.. (phm ke x nih)
apis apis 12:51 AM
@HaFizRahMaN.com letak kt bwh header la.
musi musi 9:38 AM
Salam;
Teman cuba pasang, memang cun le, butang menunye hidup .
Tapi nak buat link kat butang eg. contact ke page yg dah de camne ye. Tolong ajar teman ler sifu. T.kasih.
apis apis 12:23 PM
nescafe, background text ade kaler pich la.same mcm epin ckp tuh.cmne eh?
Nescafe aisNescafe ais 1:29 PM
@apis

Ada link blognya tak. Bagi aku linknya,nanti aku tengokkan..
apis apis 8:33 PM
@Nescafe ais ni http://akusatulagi.blogspot.com/ ni blog test aku je.tlg tgk kan ye nes.bile aku letak kt footer die ok je.tp bile letak kt bwh header tu,jadi camtu plak.
Morgan Morgan 5:54 PM
cheers bro, from indonesia. your tricks is so nice and very usefull . visit my blog. Most of all your trick i.ve use at mine. Thanks alot
Ezao' Edogawa Ezao' Edogawa 9:37 AM
salam!
kenapa sy buat. menu tu tak satu line? dia bertindihh ...? nak edit yg mana pulak?
apis apis 2:28 AM
neslo,alhamdulillah dah settle problem tuh ^^
~~Ciklinn~~ ~~Ciklinn~~ 1:27 AM
salam, ciklinn try buat tapi keluar bertindihlah... camner yer
Nur Syamila Nur Syamila 6:32 PM
nak tnya.dh buat dh and jadi.pastu,nk post kt situ cena lak?
Honey Daa Honey Daa 7:56 AM
thanks!! setelah berpenat lelah! :D
okizariryu okizariryu 10:32 PM
Fulamak! Thank you bro!^^
Nur Muhajirah Nur Muhajirah 8:29 PM
Sy mc xfaham lah , yg link² 2 sy ke taupn url image ? Katakan r sy nak bt menu Tips . So,link yg btnda red 2 msti url image tips ke? Mcm na mao letak sbrg enteri kat dlm 2 ?
Syira Bieber ♥ Syira Bieber ♥ 7:53 PM
Huhu, thanks :) jadik jugak.
prsunisza.blogspot.com prsunisza.blogspot.com 10:14 AM
Cuba try tegk blog saya.. http://prsunisza.blogspot.com
kenapa yang warna biru tu besar ek???? ada penyelesaian tak????
prsunisza.blogspot.com prsunisza.blogspot.com 7:49 AM
hari tu ada tanya camne nak kecikkan warna biru di blog kami tu.. tapi tiada respond... hope leh tolong k... http://prsunisza.blogspot.com
AnonymousAnonymous 8:17 PM
mne nak dpt kod colours tu ?
dean dean 5:43 PM
hm..da try..tp bnda alah 2 kuar kt tmpt len..dia xkuar kt top
darjeelingSketch darjeelingSketch 1:38 PM
cane nak wat ble klik menu tab ni dye kuar kat tab baru?
Firdaus Kasim Firdaus Kasim 1:38 AM
@Nescafe ais bro, cuba tgk blog aq.. mcmana nk centrekan menu tue ekh???
fatin fatin 1:43 PM
dah jadik dah.....
thanx
tp mcam maner nk buang benda yg wane itam tu...
yg shadow byak2 tu?
Norhafsham Norhafsham 3:42 PM
en nescafe bley tlg tgk kan blog gua x? rase mcm xkene je ni. http://norhafsham.blogspot.com/
hudadida hudadida 2:35 AM
@Nescafe ais

mcm mana nk bg menu tab tu center?
dah letak padding: 8px 0px 10px 0px
tp menu tu float left, bila letak float center dia akan tambah padding tu sendiri..
♛ Nazirah a.k.a Naz ♛ ♛ Nazirah a.k.a Naz ♛ 9:22 PM
tak menjadik la..maybe sebab link ni takde :(

https://sites.google.com/site/jquery01/jquery.spasticNav.js