.:: Tutorial tab menu ::.

oke.. seperti yang dijanjikan... hehehe.. first time nak bagi tutorial melibatkan coding2 ni.. nih pun aku cnp dari belog maribinablog.blogspot.com yang best gilak tu.. hihihihi.. tapi opkos laa aku ada ejas2 sket ikut citarasa aku kan.. apa2 pun kreadit untuk pentulis belog maribinablog tu ye.. time kasih.. hikhikhik

apa2 pun mula2 tu jangan lupa laa pulak menda basic nya kan..

>> login belog masing2 >> click design >> click page elements >> click edit untuk add widget >>pilih HTML/javascript >> then paste laa coding yang macam kat bawah ni >> save >> siap!

mari tengok coding nya pulak ye...

.........................................................................................................................

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

background: -moz-linear-gradient(top, #800040, #c94093);

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

-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 0px 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="LINK HERE">Home</a></li>

<li><a href="LINK HERE">About</a></li>

<li><a href="LINK HERE>My Life</a></li>

<li><a href="LINK HERE">Tutorial</a></li>

<li><a href="LINK HERE">Sharing is caring</a></li>

<li><a href="LINK HERE">Campaign</a></li>

<li><a href="LINK HERE">Contest</a></li>

<li><a href="LINK HERE">Bisnes</a></li>

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

.........................................................................................................................

notes:

perasan tak dalam coding tu ada yang aku BOLD kan tu.. oke.. yang kat ctu boleh ubah ikut selera masing2 ye..

contoh 1

.........................................................................................................................

background: #800040;

background: -moz-linear-gradient(top, #800040, #c94093);

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

.........................................................................................................................

yang code #800040 tu adalah untuk kaler pepel gelap.. menda nih akan berfungsi macam highlight laa bila korang point kan cursor tu dekat tab menu tertentu..

code #c94093 tu pulak kaler pink.. sama jek fungi dia.. untuk kaler background highlight tab menu.. kira nya ada 2 tone kaler laa (cam belog aku tema kaler pepel + pink... so, kasik combine dua kaler tu)

owh ye.. nak mudah untuk carik code kaler2 tu, korang bleh tengok kat cni http://html-color-codes.info/

contoh 2

.........................................................................................................................

#lava-lamp {

background: #32312E;

float: left;

.........................................................................................................................

apa kehei nya banyokk sangat kaler background ye dak?? hikhikhik.. xplain pleaseeeee..

oke.. yang nih plak kaler background bila tab menu dalam keadaan idle.. maksudnya kat sini.. bila korang x letak cursor dekat tab menu tu, kaler basic dia adalah kaler ni.. dalam contoh kat belog aku nih, code kaler #32312E tu mewakili kaler kelabu asap version nak ke hitam sket.. hihihihi

contoh 3

.........................................................................................................................

<li id="selected"><a href="LINK HERE">Home</a></li>

<li><a href="LINK HERE">About</a></li>

<li><a href="LINK HERE>My Life</a></li>

<li><a href="LINK HERE">Tutorial</a></li>

<li><a href="LINK HERE">Sharing is caring</a></li>

<li><a href="LINK HERE">Campaign</a></li>

<li><a href="LINK HERE">Contest</a></li>

<li><a href="LINK HERE">Bisnes</a></li>

<li><a href="LINK HERE">Contact</a></li>

</ul>

.........................................................................................................................

oke.. yang nih penting ni.. dekat perkataan LINK HERE tu, korang gantikan dengan link2 yang korang nak laa.. contoh eh.. untuk LINK HERE yang atas sekali tu, aku gantikan dengan link untuk ke belog aku dan aku namakan as HOME... cam kat bawah ni...

.........................................................................................................................

<li id="selected"><a href="http://atia08.blogspot.com">Home</a></li>

.........................................................................................................................

yang lain2 pun korang gantikan laa nanti.. pastu ikut suka korang laa nak namakan apa.. cam aku dekat tab menu aku tu nanti akan ada laa Home, My Life, Tutorial, Sharing is Caring, Campaign, Contest, Bisnes n Contact..

oke tu jek.. ada paham kah?? tarak paham kalu, sila jangan malu bertanya.. kang sosat jalan.. hehehehe