Jan 8, 2012

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!

37 Pemisah Kata:

tiaLAURENN said...

alalalah comey . nnti tia cube try test , hehe

khairul said...

pandai la siti

Dinas Aldi said...

Berkongsi ilmu yeh, bagus2 :)

Terima kasih sudi ke blog akak ;)

MaYa MustWany said...

krew memang best n xlokek tutorial..bgus cik share jugak

ciK LyndaWawa said...

alaa..takde contoh ke?? hehe

Mizz ErMa said...

cik teddy da try ke? cantik x? hihi

Eera Shera said...

oh dari dulu lg nak tau..thx ek..kalo rajin nanti boleh try ;)

Original CikTeddy said...

@Mizz ErMa haiya..sy sudah guna maa..x nmpk ka yg kt tepi tu?lgpun kt ats tu cik dh ckp kan?huhu

Original CikTeddy said...

@ciK LyndaWawa kan sy dh ckp di atas tu maa..yg sy gune skrg tula..huhu

ciK LyndaWawa said...

bace..tapi tak tau yang tab yang mane...len kali print skrin.....

maklumlaa..saya mana reti widget2 ni....

Original CikTeddy said...

@ciK LyndaWawa hehe..segala ksulitan amat dikesali..

Mizz ErMa said...

bkn xbaca, tapi xpaham..hehe (multitab tu yg macam mana? sy tekan xde tukar pape pon kaler?) =')

Polskahackrew said...


thanks sudi share cik teddy..('',)

Hanie_Dew said...

oh cik teddy yang comel. kamu dah comel. jgn ikut fakers. takde keje. baik ko buat tutorial banyak2 .hehehe

Mohamad Azizi Md Said said...

tq share cik ^^ nanti GG try buat :D

Jue said...

Wah aku suka mende yg ada tutorial neh. Thx for sharing beb!

Psst; sorry br skrg lawat blog ko blk..tuan rumah nama Jue tu mmg bz skit banding tuan rumah sorg lg hihi

Original CikTeddy said...

@Hanie_Dew haha..gurau je lorh..mls eh jd faker..

CekbOlat-bOlat said...

cehh.. hari tu bolat cri tak jumpe =="

nseb baik dh letak depan2.. haihh.. jijah2..

Azlan Hasan said...

owh..useful gak widget nie..yang macam cik teddy pakai nie ka..3 in 1..hehe..

Regards,
-Strider-

aReLaN said...

oooo...naruhodo.macam tu rupanya.hehehe..thanks

RinsyaRyc said...

waa,, tutorial blog.. mesti glemer lepasni sbb org skang suke buat blog omey2 cam blog cik teddy.. hehe

Pendamba Mawar said...

smart seyyyyyyyyy

Teenager Housemaid said...

ooo..

*lost in words tengok tutorial ini*

Woofer Storm said...

nampak mcm cool je ni..hehhee

#nak buat tapi coding tak mesra alam..grrrrrrrr

EZAD AMIR said...

nice..tp aq x pasang pn shoutbox ni kt blog..sbb kalo online pkai phone,view mobile mode..xnampak..ekekeke

Hazimah Mahdi said...

hii cik teddy :D sya ni nk text kat shoutbox tpi shoutbox cik teddy xkuar2 so sya text sni sjalah yee. nk ucapkn trima ksih sbab sudi singgah kat blog sya hri tu. dah follow tuu :)

Original CikTeddy said...

@Hazimah Mahdi x kuar?isk3..kesian awk..hehe ok thanks ^^

Original CikTeddy said...

@Woofer Storm knp ye?huhu

Original CikTeddy said...

@RinsyaRyc ololoh..x glemer pon..kite wat tuto yg kite gune je..^_^

Original CikTeddy said...

@aReLaN hehe..arigato!

kim heeruul said...

nice nice ..^^

LoveMimu said...

ade keajaiban ! dengan background blog pun bertukar warna :D

Syafiikaaa said...

Tak jadi pun. Yang code widget tu amek kat mana? :(

namasayasyafika said...

Bukan. Yang code widgrt tab 1,2,3 tu cik teddy amek kat mana? :(

Nurul said...

Waa ! menjadi lh~ thanks .

jia creatifelt said...

alhmadulilh..berjy dpt menjimatkn ruang blog.tq, dear

Sheda ucu said...

dear nice nk tuto multitab yg stu lg tuh yg fan page gbs renungan tuh pleasee dear