TUTORIAL |Menu Tab|


.assalammualaikum.hari tu,ada someone RQ camna nak buat menu tab macam kat bawah neyh::

jom buat neyh...
Dashboard-Design-Page Element-Add Gadget-Add HTML/Javascript.

Copy kod dibawah.[Jangan SAVE dulu,sebab nanti korang nak kena edit]

<center>
<style>
#container {
width: 950px;
margin: 10px 10px;
padding: 0px 0px 40px 10px;
}
ul, li {
margin: 0; padding: 0;
}
#blob {
border-right: 1px solid #FF75C4;
border-left: 1px solid #FF75C4;
position: absolute;
top: 0;
z-index : 1;
background:#000000;
background: -moz-linear-gradient(top, #DF0174, #DF0174);
background: -webkit-gradient(linear, left top, left bottom, from(#DF0174), to(#DF0174));
-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:#FFFFFF;
float: left;
border: 5px dotted #DF0174;
margin: 0px 0px 15px;
padding: 10px 10px 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: #000000;
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://ecadwinkyasha.blogspot.com">eca's story</a></li>
<li><a href="http://ecadwinkyasha.blogspot.com/p/tuan-punya-blog.html">all about her</a></li>
<li><a href="http://ecadwinkyasha.blogspot.com/p/contact-me_13.html"> contact eca</a></li>
<li><a href="http://ecadwinkyasha.blogspot.com/p/tutorial.html">tutorial</a></li>
<li><a href="http://ecadwinkyasha.blogspot.com/p/linkexchange.html">exchange link</a></li>
<li><a href="http://ecabloglist.blogspot.com/">bloglist</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>
</center>

edit benda neyh:
kaler merah: 950px.ini adalah kelebaran tab tersebut.kalau korang nak bagi lagi lebar,tambah je.kalau tak,kurangkan.
bold hitam: link page korang.
kaler biru: text yang akan keluar dalam tab itu.
nak ubah kaler: cari kod kaler html,tukar kod yang bermula dengan ini #.

tak paam,tanya je oke.
I actually tengah lapar time buat tutorial ini.hikhikhik.so,mood tak berapa nak bagus.

1 comment... add one now

ISMA ILYA AHMAD PUAD ISMA ILYA AHMAD PUAD 08 February, 2013
ohoho.. lama dah nak buat cenggini
cari-cari nak buat
tanx dear
will try soon :)

Terima Kasih atas komen anda.
Eca akan balas & terjah anda secepat mungkin.
*-*