Tutorial : Cara membuat tab menu frequency lava-lamp

ehemehem, assalamualaikum..


hari nie satu lagi tuto azza nak ajar dekat korang, hari nie azza nak ajar korang macam mana cara nak buat tab menu yang comel cam azza tu, nama dia, frequency lava lamp tau, coding diubah, azza bukan amek code darui maribinablog.com :))


okay, simple mimple, korang just kena log in > dashboard > design > add a gadjet

okay, di dalam petak kosong HTML tu korang add code nie tahu.

<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: #B93B8F;

background: -moz-linear-gradient(top, #B93B8F, #F9B7FF);

background: -webkit-gradient(linear, left top, left bottom, from(#B93B8F), to(#F9B7FF));

-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: 880px;

}

#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://NAMABLOG.blogspot.com
"><b>Home �</b></a></li>

<li><a href="link menu"><b>nama menu</b></a></li>

<li><a href="link menu"><b>nama menu</b></a></li>

<li><a href="link menu"><b>nama menu</b></a></li>

<li><a href="link menu"><b>nama menu</b></a></li>

<li><a href="link menu"><b>nama menu</b></a></li>

<li><a href="link menu"><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>

okay, dah add ? nak ubah code ? boleh sahaja sayang sayang sekalian okay,

untuk ubah panjang lebar blog korang tu, korang just kena cari width: 880px; yang telah diBOLDkan .

untuk ubah warna button tu, kalau azza pink, korang leh tukar pada apa apa warna sekalipun, dengan mencari code #B93B8F), to(#F9B7FF)) yang telah diBOLDkan .

untuk memasukkan link, korang just tukar nama menu tu pada ayat korang sendiri, kalau tutoral maka tutorial lah, dan link menu tu plak, korang masukkan code link tu tau

takkan tak paham kot, hehe, azza tahu korang dah biasa kan dengan nie smua ? so, selamat berjayaa !

Love,