Tutorial: Horizontal Tab Menu Bar ( Jquery Lava-Lamp)

assalamualaikum 

aku nak buat tutorial yg macam title entry nih . hehe . thanx akak syera sbb tunjukkan link . aku saje je nak buat tuto nie sebab naty senang lah kalau nak cari apa2 tuto sumenye dalam blog aku sendiri . tak payah dah pening2 nak carik tang mana . hahaha . 

1. Dashboard > Design > Page Element > Add gadget > Html/javascript

2. Copy kod2 nie dalam Html/javascript tu . Tekan CTRL+C

<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="LINK">NAMALINK</a></li>
<li><a href="LINK">NAMALINK</a></li>
<li><a href="LINK">NAMALINK</a></li>
<li><a href="LINK">NAMALINK</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>



3. Edit code berikut :
hijau - warna button tab menu tuh
merah- warna background tab menu
oren- panjang tab menu
merah jambu- tukakan link and nama link tuh

4. Save !

kalau korang dah gune tuto nie , korang like lah sekali . hee :)
credit : cahaya

Iloveyou :)

8 budak cute:

Nurul Hafiza said...

kalau tkmau garis2 uh cmana dek ?

Nurul Aida Shafiena said...

Bambam : cuma tukakan code2 warna tuh jee lah akak

FH said...

Hihi . Suka tutorial ni :D

Nurul Aida Shafiena said...

F.H . hahaha . WECK .

aliyah amani said...

huhu. .xpham bhgian tuka nama link 2 :/

Nurul Aida Shafiena said...

tuka kan code yang link yang saya tulis link and nama link tuh

1 BESTARI 2011 said...

Nk letak link tu mcm mana ?

Nurul Aida Shafiena said...

@1 BESTARI 2011amek lah link yang kamu suke and letak kan sekali dengan http://