Tutorial : Tab Menu Menggunakan JQuery Lava-Lamp

Assalamualaikum :)
Alhamdulillah, harini Ajmal nak buat tutorial. Tahu tak Jquery Lava-Lamp? Wat2 sudah laa~ contohnya yang macam Ajmal guna utk buat tab menu kat atas tuu.


Langkah 1:

Design - Page Element - Add a Gadget - Add HTML

Langkah 2:
Copy kod di bawah

<style>
#container {
width: 100%;
margin: 0px 0px;
padding: 0px 0px 40px 10px;
}
ul, li {
margin: 0; padding: 0;
}
#blob {
border-right: 3px dotted #0059ec;
border-left: 3px dotted #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #FF0080;
background: -moz-linear-gradient(top, #FF0080, #F5A9D0);
background: -webkit-gradient(linear, left top, left bottom, from(#FF0080), to(#F5A9D0));
-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: #FFFFFF;
text-shadow: 0 0px 1px #81807B;
position: relative;
z-index: 2;
float: left;
font-size: 18px;
font-family: CyberCaligraphic, 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://ajmaltahani.blogspot.com">ツHomeツ</a></li>
<li><a href="http://ajmaltahani.blogspot.com/p/about-me_25.html">ツAbout Meツ</a></li>
<li><a href="http://ajmaltahani.blogspot.com/p/blog-page.html">ツExchange Linkツ</a></li>
<li><a href="http://ajmaltahani.blogspot.com/p/tutorial.html">ツTutorialツ</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>

8.10.sion !

• Kalau nak tukar warna lampu yang "menghighlight" tab. Dia ada dua warna, satu atas, satu bawah. 

background: #FF0080;background: -moz-linear-gradient(top, #FF0080, #F5A9D0);background: -webkit-gradient(linear, left top, left bottom, from(#FF0080), to(#F5A9D0)); 

• Kalau tak nak guna background macam Ajmal, buang

#lava-lamp {
background: #32312E;
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 15px;
padding: 8px 430px 10px 0px;
}

• Kalau nak tukar tulisan, tukar kat

font-family: CyberCaligraphic, sans-serif;

• Tukarkan url berikut kepada url anda beserta tajuk anda sendiri

<ul id="lava-lamp"><li id="selected"><a href="http://ajmaltahani.blogspot.com">ツHomeツ</a></li><li><a href="http://ajmaltahani.blogspot.com/p/about-me_25.html">ツAbout Meツ</a></li><li><a href="http://ajmaltahani.blogspot.com/p/blog-page.html">ツExchange Linkツ</a></li><li><a href="http://ajmaltahani.blogspot.com/p/tutorial.html">ツTutorialツ</a></li></ul>