Tutorial Fancy Multitab Widget

Assalamualaikum~

Cik Teddy is comeback with a smile Hari ni kita nak buat tuto sikit,request dari Shasha.Sorry,cik tak jumpa cari link.hehe Before that,code widget ni kita kredit sepenuhnya untuk kawan kita, Krew !Widget ni menarik sikit sebab bila kita tekan tab lain,warna background pun akan ikut tukar sekali.Demo,cuba main2 dengan multitab Cik Teddy yang macam kat bawah ni.Bawah ni gambar je,widget betul kat sidebar tu ye..Okeh lets begin~

Design >> Add a gadget >> Html/javascript

copy kod dibawah dan paste dalam kotak html/javascript ye :)

<div id='polskahekjor'>
<script type="text/javascript">function bgChange(bg){document.body.style.background=bg;}</script>
<style type="text/css">
div.P0L5K4 div.C0D3R
{height: 24px; overflow: hidden;float:left; }

div.P0L5K4 div.C0D3R a:hover
{ background-color: #eee; }
div.P0L5K4 div.C0D3R a.Active{background:#00ffcc;color:#ff3366;}

div.P0L5K4 div.N0T4C0D3R
{ clear: both; border: 1px solid #ff3366; overflow: hidden; background-color: #eee;}

div.P0L5K4 div.N0T4C0D3R div.h3ll0c0d3r
{ height: 100%; padding: 0px; overflow: hidden; }


div.P0L5K4 div.N0T4C0D3R div.h3ll0c0d3r div.BL0g3R
{ padding: 3px 5px; }

div.P0L5K4 div.C0D3R a
{ background:#ff3366; float: left;border-radius:11px 11px 0px 0px;
display: block; width: 33%; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
font-size: 11px; font-weight: 900; color: #151515;}


</style>

<script type='text/javascript'>

//<![CDATA[

function P0L5K4_C0D3R(P4WN3D, id)
{
var P0L5K4 = document.getElementById(P4WN3D);
var C0D3R = P0L5K4.firstChild;
while (C0D3R.className != "C0D3R" ) C0D3R = C0D3R.nextSibling;
var TT = C0D3R.firstChild;
var i = 0;
do
{
if (TT.tagName == "A")
{
i++;
TT.href = "javascript:P0L5K4_J3R('"+P4WN3D+"', "+i+");";
TT.className = (i == id) ? "Active" : "";
TT.blur();
}
}
while (TT = TT.nextSibling);
var N0T4C0D3R = P0L5K4.firstChild;
while (N0T4C0D3R.className != 'N0T4C0D3R') N0T4C0D3R = N0T4C0D3R.nextSibling;
var h3ll0c0d3r = N0T4C0D3R.firstChild;
var i = 0;
do
{
if (h3ll0c0d3r.className == 'h3ll0c0d3r')
{
i++;
if (N0T4C0D3R.offsetHeight) h3ll0c0d3r.style.height = (N0T4C0D3R.offsetHeight-2)+"px";
h3ll0c0d3r.style.overflow = "auto";
h3ll0c0d3r.style.display = (i == id) ? 'block' : 'none';
}
}
while (h3ll0c0d3r = h3ll0c0d3r.nextSibling);
}
function P0L5K4_J3R(P4WN3D, id) { P0L5K4_C0D3R(P4WN3D, id);
}
function P0L5K4_H4CKR3W(P4WN3D) { P0L5K4_C0D3R(P4WN3D, 1);
document.write('');}

//]]>

</script>

<form action="P0L5K4.html" method="get">
<div id="P0L5K4" class="P0L5K4">
<div style="width: 100%;" class="C0D3R">
<a onclick="bgChange('#6633FF')">Nama Tab1</a> <a onclick="bgChange('#151515')">Nama Tab 2</a> <a onclick="bgChange('#ffffff')">Nama Tab 3</a></div>
<div style="width: 100%; height: 250px;color:#151515;" class="N0T4C0D3R">
<div class="h3ll0c0d3r" style='background:#ffb3c6;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 1

</div>
</div>
<div class="h3ll0c0d3r" style='background:#b3ecff;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 2

</div>
</div>
<div class="h3ll0c0d3r" style='background:#ecb3ff;'>
<div class="BL0g3R">

Masukkan code widget di sini tab 3

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">P0L5K4_H4CKR3W('P0L5K4');</script>
</div>

Warna merah tu background yang akan bertukar.Hijau tinggi widget ni.Lain-lain,tulisan yang aku bold dan warna lain tu pandai2 la tukar ye.Dah jelas kat situ nak letak apa kan?hehe Kalau tak suka warna widget yang sedia ada korang boleh bermain dengan kod2 warna yang ada,aku dah boldkan yang korang boleh tukar.TES ye! Try,Error @ Success!Kod warna pilih SINI << Siap,save!Tak faham tanya ok..^_^

Selamat Mencuba!