Tutorial : Cara Pasang Jquery Lava-Lamp Navigation Menu.

Assalamualaikum.

Sebelum ini aku ada buat tutorial untuk buat tab menu mudah yang menggunakan aplikasi sedia ada di blogger ni sendiri.

Oleh sebab, ada rakan blogger tanya kat aku macam mana nak buat tab menu yang boleh bergerak-gerak macam yang ada kat atas tu. Jadi sekarang ambil pen dan kertas okey. Hehe.

Caranya sangat mudah dan simple.

1. Copy code di bawah ini pada note pad.


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




2. Kemudian pergi dashboard > design > page element > add gadget > edit html/java script, paste dan save.
3. Letakkan dibawah header.


Note
1. Untuk ubah warna button, edit kod yang berwarna biru.
2. Untuk ubah warna background, edit kod yang berwarna merah.
3. Untuk ubah URL dan tajuk, edit kod yang berwarna pink.
4. Untuk ubah jarak background, edit kod yang berwarna hijau. (rujuk gambar di bawah)

 klik untuk pembesaran

5. Untuk dapatkan kod warna klik sini, HTML color code


Selamat mencuba. Kalau ada pertanyaan sila kemukakan di ruangan komen atau terus tanya kat FB aku okey.


||tutorial di adaptasi dari Blog Tutorial Pilihan Malaysia 2010


Sekian, wassalam.

Tweet