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:

lady L said...

alalalah comey . nnti tia cube try test , hehe

Unknown said...

pandai la siti

Dinas Aldi said...

Berkongsi ilmu yeh, bagus2 :)

Terima kasih sudi ke blog akak ;)

Anonymous 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 ;)

CikTeddyCorner said...

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

CikTeddyCorner 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....

CikTeddyCorner 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..('',)

Anonymous said...

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

azizi 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

CikTeddyCorner said...

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

iAmCekbolat said...

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

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

Azlan Strider 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

Zehan Ilyana 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

Anonymous said...

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

Siti_Asmara 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 :)

CikTeddyCorner said...

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

CikTeddyCorner said...

@Woofer Storm knp ye?huhu

CikTeddyCorner said...

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

CikTeddyCorner said...

@aReLaN hehe..arigato!

kim heeruul said...

nice nice ..^^

CikMunBlogger said...

ade keajaiban ! dengan background blog pun bertukar warna :D

Syafiikaaa said...

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

Anonymous said...

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

Nurul Fatihah said...

Waa ! menjadi lh~ thanks .

Unknown said...

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

Anonymous said...

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