Tutorial Menu Bar(jquery lava-lamp)

Assalamualaikum dan salam sejahtera kepada semua blogger,hari ini krole ingin membuat tutorial bagaimana hendak meletakkan menu bar(jquery lava-lamp)diblog korang~mula-mula krole ingin mengucapkan terima kasih kepada blogger mijie yang membenarkan krole untuk membuat tutorial ini(tq mijie~).cara-cara untuk membuat menu bar ini amat mudah kerana tak perlu untuk mengedit HTML yang sememangnya amat memeningkan kepala sekiranya kurang paham atau tiada asas edit-mengedit HTML ni(cam krole r ngeee~),krole akan cuba buat tutorial ini sesimple yang boleh yer~


Step 1 : Login Dashboard => Design => Page Elements => Add a Gadget => Pilih HTML/Javascript .

Step 2 : Copy kod dibawah dan paste kan pada ruangan tadi.


<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://www.krolezone.com'><b>HOME</b></a></li>



<li><a href='http://www.krolezone.com/'><b>NAMA MENU</b></a></li>



<li><a href='http://www.krolezone.com/><b>NAMA MENU</b></a></li>



<li><a href='http://www.krolezone.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>


Step 4 : Klik Preview untuk lihat hasilnya. Semoga berjaya..;)

P/S : -
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.

setelah berjaya sila melompat dengan menjerit yeahhhhh!!!!ngeeee~
p/s : kalo de mslh gtau krole ek~