Friday, June 10, 2011

Tutorial JQuery Tab Menu

macam tu lah! nak tak? nah! kasikan! weeee~

1. Log in blogger korang
2. Deahboard > Design > Add A Gadget > HTML/Javascript

pastikan add a gadget tu di bawah header okey? kalau tak? tak jadilah, weh! 

<center>
<style>
#container {
width: 130%;
margin: 0px 0px;
padding: 0px 0px 40px 14px;
}

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: #F78181;
background: -moz-linear-gradient(top, #ffffff, #ffffff);
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
-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-image:url(URLGMBR);
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 12px;
padding: 13px 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: #413839;
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 ANDA">Nama link</a></li>
<li><a href="LINK ANDA">Nama link</a></li>

<li><a href="LINK ANDA">Nama link</a></li>
<li><a href="LINK ANDA">Nama link</a></li>


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

yang merah, warna bila korang hover di situ
yang biru tu background untuk bakal tab menu korang heee
yang purple tu link page yg korang nak pegi tuu
tips:background jgn cari yg semak!nnt tak cantik.. Assalamualaikum!
creds: kak nazihah A's

No comments:

Post a Comment

saye suke owang yang tngh comment ni ^_^