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;


Cara pasang Jquery lava-lamp navigation menu
Nescafe ais
delete

@amoi

Dah boleh install klik untuk komen tu :DD

@Nescafe ais dah boleh dah :DD

thanks again!

dia punya lebar terlebih la pulak antara kiri dan kanan ada lebih sedikit , macam mana nk tukar ?

@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.

link tu link ape and mane nak dapat? huhuhu

@Nescafe ais

err ~ maksud saya dia terlebih bahagian kiri ~

Menarik ni....
Bila kelapangan nk cuba jgk la....

nak place kat mna????klw letak kat sidebar...dia naik kat sidebar....kna masuk dalam edit html x?

apsal mcm ade background kaler pich kat belakang huruf?

@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)

@HaFizRahMaN.com letak kt bwh header la.

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.

nescafe, background text ade kaler pich la.same mcm epin ckp tuh.cmne eh?

Nescafe ais
delete

@apis

Ada link blognya tak. Bagi aku linknya,nanti aku tengokkan..

@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.

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

salam!
kenapa sy buat. menu tu tak satu line? dia bertindihh ...? nak edit yg mana pulak?

neslo,alhamdulillah dah settle problem tuh ^^

salam, ciklinn try buat tapi keluar bertindihlah... camner yer

nak tnya.dh buat dh and jadi.pastu,nk post kt situ cena lak?

thanks!! setelah berpenat lelah! :D

Fulamak! Thank you bro!^^

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 ?

Huhu, thanks :) jadik jugak.

Cuba try tegk blog saya.. http://prsunisza.blogspot.com
kenapa yang warna biru tu besar ek???? ada penyelesaian tak????

hari tu ada tanya camne nak kecikkan warna biru di blog kami tu.. tapi tiada respond... hope leh tolong k... http://prsunisza.blogspot.com

Anonymous
delete

mne nak dpt kod colours tu ?

hm..da try..tp bnda alah 2 kuar kt tmpt len..dia xkuar kt top

cane nak wat ble klik menu tab ni dye kuar kat tab baru?

@Nescafe ais bro, cuba tgk blog aq.. mcmana nk centrekan menu tue ekh???

dah jadik dah.....
thanx
tp mcam maner nk buang benda yg wane itam tu...
yg shadow byak2 tu?

en nescafe bley tlg tgk kan blog gua x? rase mcm xkene je ni. http://norhafsham.blogspot.com/

@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..

tak menjadik la..maybe sebab link ni takde :(

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