.



Assalamualaikum...

Hai korang..kali nie Wan nak ajar korang macma mana nak wat tab menu yang simple dan mudah...Kalau korang nak..


Jom Tutorial..


Caranya mudah sangat..

Dashboard>add gadget>HTML

Copy dan paste kod kat bawah nie.

<center><style>
#WanHazel-Container {
font: normal 1em Arial, Helvetica, sans-serif;
width:100%; float:left;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
background: #4d4b4d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64-xynlKQvkLbw4XoOKhXEbzdrPmTlYzr4yhs2PxMHUEpqc-w21DqYtmwZyYHVC8140x5WRD3mhZlfyHwgxoZoakBAODPcXvX3QCte_l16AW4juz9wagafH2lbgPn-qZ_c5e220UzCfI/s1600/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none; }

/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64-xynlKQvkLbw4XoOKhXEbzdrPmTlYzr4yhs2PxMHUEpqc-w21DqYtmwZyYHVC8140x5WRD3mhZlfyHwgxoZoakBAODPcXvX3QCte_l16AW4juz9wagafH2lbgPn-qZ_c5e220UzCfI/s1600/gradient.png) repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .2);
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #4d4b4d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64-xynlKQvkLbw4XoOKhXEbzdrPmTlYzr4yhs2PxMHUEpqc-w21DqYtmwZyYHVC8140x5WRD3mhZlfyHwgxoZoakBAODPcXvX3QCte_l16AW4juz9wagafH2lbgPn-qZ_c5e220UzCfI/s1600/gradient.png) repeat-x 0 -100px !important;
color: #fff !important;
text-align:left;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0,0,0, .1);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
/* level 2 list */
#nav ul {
display: none;
text-align:left;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi64-xynlKQvkLbw4XoOKhXEbzdrPmTlYzr4yhs2PxMHUEpqc-w21DqYtmwZyYHVC8140x5WRD3mhZlfyHwgxoZoakBAODPcXvX3QCte_l16AW4juz9wagafH2lbgPn-qZ_c5e220UzCfI/s1600/gradient.png) repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 0 #fff;
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners of first and last link */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
</style>

<div id="MBT-Container">
<ul id="nav">

<li><a href="Link blog korang">Home</a>
<li><a href="Link 1">tab 1</a></li>
<li><a href="Link 2">tab 2</a></li>
<li><a href="Link 3">tab 3</a></li>
<li><a href="Link 4">tab 4</a></li>
<li><a href="Link 5">tab 5</a></li>

</li></ul>



<br/>




<br/></div></center>

Tab menu nie tak de drop down menu k..Nak buat yang mudah je untuk korang..Kalau korang nak ubah warna latar tab menu korang nie..Korang tukar kod warna nie..4d4b4d ..Kod warna HTML korang leh dapat kat sini


klik untuk Kod Warna HTML - XHTML - XML - CSS


Link 5 dan tab tu korang ubah lah ikut kesesuaian korang..Link tu korang ambik dari page yang korang dah buat atau mana mana entri korang..korang leh rujuk kat sini kalau nak wat new page

http://wanhazel.blogspot.com/2011/04/tutorial-wat-new-page-dan-link-dalam.html



Bila dah selesai..

Korang save dan lihat lah hasilnya..


Kalau suka entri kali nie klik like atau sponsor Wan rm0.20 .Klik kanan dan open in new tab k , atau klik button donate.Yang iklhas nak klik je taw..Terima kasih

Who are you betting on for Axiata Cup? The Best
When price tags are slashed into half






Papai


.