Posted by  | 10.19.2010  at 9:28 AM  

Cara Memasang Jquery Lava-lamp Menu

nak buat menubar yang boleh gerak2 macam pN.rOs nyer tu?


ha tak susah pon. dan paling penting tak perlu sentuh CCS coding yang boleh kasi pening tu ehehehe
ikut ye langkah yang pN.rOs bagi ni

lankah 1:
Login Dashboard > Design > Page Elements > Add a Gadget pilih
HTML/Javascript...

langkah 2:
Copy kod dibawah ini dan paste pada kotak HTML/Javascript



copy semua kod ini ya


<style>
#container {
width: 970px;
margin: 0px 0px;
padding: 0px 0px 0px 0px;
}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: #AE0000;
background: -moz-linear-gradient(top, #AE0000, #C30000);
background: -webkit-gradient(linear, left top, left bottom, from(#AE0000), to(#C30000));
-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: #E4E2E2;
background: -moz-linear-gradient(top, #E4E2E2, #FAFAFA);
background: -webkit-gradient(linear, left top, left bottom, from(#E4E2E2), to(#FAFAFA));
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 0px;
padding: 8px 0px 10px 0px;


width: 970px;
}#lava-lamp li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 0px solid #4a4a4a;
}#lava-lamp li a {
color: #202020;
text-shadow: 0 0px 0px #202020;
position: relative;
z-index: 2;
float: left;
font-size: 13px;
font-family: arial, sans-serif;
font-weight: normal;
text-decoration: none;
padding: 0px 20px;
}

</style><div id="container"><ul id="lava-lamp">
<li id="selected"><a href="http://mrsaqur.blogspot.com
"><b>HOME</b></a></li>

<li><a href="http://mrsaqur.blogspot.com/"><b>NAMA MENU</b></a></li>
<li><a href="http://mrsaqur.blogspot.com/"><b>NAMA MENU</b></a></li>
<li><a href="http://mrsaqur.blogspot.com/"><b>NAMA MENU</b></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>
td>

perhatian ya kawan2 : -
1 - Pastikan anda add a gadget/paste kod pada bahagian header.
2 - Untuk menukar warna tab menu cari kod ni #AE0000; .
3 - Untuk menukar warna background menu cari kod ni #E4E2E2; .
4 - Untuk menukar width menu, jika size menu terlalu besar @ pendek, cari kod ni width : 970px;
5 - Tukar href(link) kepada link untuk menu tersebut dan tukar NAMA MENU kepada nama pilihan anda sendiri. nak buat banyak manapun sub menu takpa asalkan tambah la link dan nama menu tu

orait cni dulu.... apa2 persoalan silahlah kemukakan ye.. nanti malu bertanya sesat jalan ... daaaaa

6 Budak Tomey:

NeidIyra said...

xfaham la.. code nih nak wat ape sbnar nye..? Jquery lava-lamp menu tuh ape sbnar nye..? siyes2 x tahu nih.. care2 tuh faham..

pN.rOs said...

@NeidIyra
macam ni... kalu neidlyra tengok kat menu bar akak tu....
yg ada home, timbang blog, ujian personaliti yang leh gerak2 poit biru tu...
itu la lava-lamp menu....

AndAi Si KodOQ berBicaRA.. said...

KodOQ naK buAt taPi gadGet kaT BahaGiaN heaD adA saTU aJA......hiK..hiK..hIkk......

AndAi Si KodOQ berBicaRA.. said...

oNG..kedEQ..keDEQ..

Pn.ROs KOdOQ daH berJAya melaKUkaN nyA taPI kaT . maNA naK tukAR kaLEr..bOLeH ka Pn. rOS
dAn mAcAm maNA setIAp meNU baR tU naK baGI sAma besAr..

oNg..kedEQ..keDEQ..

AndAi Si KodOQ berBicaRA.. said...

5 - Tukar href(link) kepada link untuk menu tersebut dan tukar NAMA MENU kepada nama pilihan anda sendiri. nak buat banyak manapun sub menu takpa asalkan tambah la link dan nama menu tu


mAcAm mAna naK buAT lINk tu ya..pN.rOS

Sam Syazwina said...

Tq girl..suda jdi blog oshin.. Meh la snggah..jgn lpe follow ye,heee:)

Submit Express Inc.Search Engine Optimization
Related Posts with Thumbnails

dimanakah aku?

review http://mrsaqur.blogspot.com on alexa.com