Wadah Madrasah Pengalaman: Tutorial wat horizontal Kawaii menu tab (navigation bar) Lip lap lip lap Super cute canggih


Sunday, March 20, 2011

Tutorial wat horizontal Kawaii menu tab (navigation bar) Lip lap lip lap Super cute canggih

.


Salam korang...

Tak nak cakap panjang lah..Korang leh tengok sendiri kat Blog Wanhazeljunior.Korang arahkan cursor kat icon Home,Profile,Banner,Link,Facebook,Twitter kat situ k..Korang nampak tak perubahan??lip lap lip lap tak??ehhhe..So skang nie Wan nak wat Tutorial horizontal Kawaii menu tab (navigation bar) Lip lap lip lap Super cute canggih ..Wah tajuk..Pergh memang power lah kan..ehehhe..Law korang teringin sangat nak wat nie..senang je..Owh ye..Tutorial nie bagi pengguna design/layout template je k..Classic template tak leh nak wat menu tab nie..


Pesanan penaja
Hope tak de yang remove or edit kod yang Wan bagi nie nanti..harap sangat sangat korang faham betapa susahnya Wan koding bende nie...Edit Sikit sikit tu tak pe..jangan ubah sumber je k..

Menu tab Kawaii lip lap lip lap nie memang best sebab leh comelkan blog korang..Sangat syok.Wan tak kedekut ilmu k..Nak kan semua dapat yang terbaik.. .K lah..tunggu apa lagi..

Jum tutorial

Dashboard>Add gadget>HTML
gadget paling atas ..



Law dah..Copyand paste kod nie dalam Gadget HTML korang tu..



<div class='clear'></div>
<div class='widget html' id='html1'>
<div class='widget-content'>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<a href="http://wanhazel.blogspot.com/2011/03/tutorial-wat-horizontal-kawaii-menu-tab.html"title="Get This " onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Get This','','http://3.bp.blogspot.com/-U-7ivIP9V8U/TYT7BDnQzmI/AAAAAAAAFs0/hw2-ERs319U/s1600/wan%2B1.gif',1)"><img src="http://3.bp.blogspot.com/-mFRkyow11kc/TYT6peY3gMI/AAAAAAAAFsc/3ZB5NUE5g5c/s1600/wan.gif" alt="Get This" name="Get This" width="24" height="24" border="0" /></a>




Ok dah selesai copy..Yang nie korang pilih nak guna yang mana satu...Dan letak dibawah kod diatas tadi..Kod yang korang copy dalam Gadget HTML tu..



<a href="LINK BLOG KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel Home','','http://4.bp.blogspot.com/-wKt9lbpVz0s/TYTw2VcoL5I/AAAAAAAAFq0/Xvf6ozL4Qvk/s1600/home1.png',1)"><img src="http://4.bp.blogspot.com/-JUtaqCExVoM/TYTwtLYlChI/AAAAAAAAFqs/LCWmpI-GiNE/s1600/home.png" alt="Wan Hazel Home" name="Wan Hazel Home" width="110" height="80" border="0" /></a>





<a href="LINK PAGE PROFILE KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel Profile','','http://2.bp.blogspot.com/-7DPKyo8pzMc/TYTxH0NcfTI/AAAAAAAAFq8/cpCbmApGuJ8/s1600/Profile1.png',1)"><img src="http://2.bp.blogspot.com/-DwjXsxz-yRQ/TYTxT3dUEII/AAAAAAAAFrE/q0QHApZ112c/s1600/Profile.png" alt="Wan Hazel Profile" name="Wan Hazel Profile" width="110" height="80" border="0" /></a>






<a href="LINK PAGE BANNER KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel Banner','','http://4.bp.blogspot.com/-MFH2mghSlvo/TYTxy6tmNfI/AAAAAAAAFrU/hmqnleE0zAs/s1600/banner1.png',1)"><img src="http://1.bp.blogspot.com/-JGjeZDJwMuQ/TYTxgJtShDI/AAAAAAAAFrM/NtjG83Nthfg/s1600/banner.png" alt="Wan Hazel Banner" name="Wan Hazel Banner" width="110" height="80" border="0" />






</a><a href="LINK PAGE LINK KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel LINK','','http://4.bp.blogspot.com/-6QFFn8ews7M/TYTx8ISV2fI/AAAAAAAAFrc/Jg8KFNZiSyM/s1600/Link1.png',1)"><img src="http://4.bp.blogspot.com/-8GYe_359Kuw/TYT0qbXwSOI/AAAAAAAAFsE/JtnorLWgfTI/s1600/Link.png" alt="Wan Hazel LINK" name="Wan Hazel LINK" width="110" height="80" border="0" /></a>






<a href="LINK FACEBOOK PROFILE KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel Facebook','','http://3.bp.blogspot.com/-JuWdARUYfOE/TYTyyRCzwcI/AAAAAAAAFrs/ALlxTWW-RVg/s1600/facebook1.png',1)"><img src="http://4.bp.blogspot.com/-kfY_8XEsJEA/TYTyc_TSdpI/AAAAAAAAFrk/CpCn3Acl-d4/s1600/facebook.png" alt="Wan Hazel Facebook" name="Wan Hazel Facebook" width="110" height="80" border="0" /></a>






<a href="LINK TWITTER PROFILE KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel Twitter','','http://2.bp.blogspot.com/-hA9EKy7SDOw/TYTzDvGd-sI/AAAAAAAAFr8/CXw4w0BpZQ4/s1600/Twitter1.png',1)"><img src="http://2.bp.blogspot.com/-4-1Q1duE9Ag/TYTy43HEhdI/AAAAAAAAFr0/RutriQQDI5s/s1600/Twitter.png" alt="Wan Hazel Twitter" name="Wan Hazel Twitter" width="110" height="80" border="0" /></a>






<a href="PAGE TUTORIAL KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel Tutorial','','http://2.bp.blogspot.com/-bvYd34WRWWU/TYcBm5Np4vI/AAAAAAAAFus/NxP_8retFT0/s1600/tutorial122.png',1)"><img src="http://3.bp.blogspot.com/-8zpdBpECcco/TYcBgw6WSfI/AAAAAAAAFuk/HKoXrXDQBgE/s1600/tutorial12.png" alt="Wan Hazel Tutorial" name="Wan Hazel Tutorial" width="110" height="80" border="0" /></a>






<a href="LINK FROMSPRING KORANG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Wan Hazel fromspring','','http://3.bp.blogspot.com/-yK7B7QAFCq0/TYdUlByBOKI/AAAAAAAAFvk/SyKgI2POIZE/s1600/fromspring1.png',1)"><img src="http://2.bp.blogspot.com/-WyW2BAg7_bQ/TYdUS_99VoI/AAAAAAAAFvc/XTNe04BIviY/s1600/fromspring.png" alt="Wan Hazel fromspring" name="Wan Hazel fromspring" width="110" height="80" border="0" /></a>



Ok law dah pilih and dah letak semua yang korang nak dalam Add gadget HTML tu..Korang copy Kod yang kat bawah nie lak..mesti Law tak copy tak jadi punya..Kod kat bawah nie untuk tutup ke semua kod diatas..so letak paling bawah k..


<a href="http://wanhazel.blogspot.com/2011/03/tutorial-wat-horizontal-kawaii-menu-tab.html"title="Get This " onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Get This.','','http://3.bp.blogspot.com/-U-7ivIP9V8U/TYT7BDnQzmI/AAAAAAAAFs0/hw2-ERs319U/s1600/wan%2B1.gif',1)"><img src="http://3.bp.blogspot.com/-mFRkyow11kc/TYT6peY3gMI/AAAAAAAAFsc/3ZB5NUE5g5c/s1600/wan.gif" alt="Get This." name="Get This." width="24" height="24" border="0" /></a>
<div class='clear'></div></div>



Save and view..
Selesai..eheheh..

Selamat mencuba.Kenyit mate sikit.

Untuk ruangan Banner,Link,Profile
Korang wat lah page baru untuk blog korang..Law tak taw cara nya senang je.

G kat new post . sebelah atas tuh ada edit post ...korang klik je dan create new page korang.lepas tu publish dan pilih No gadget k..Dan korang ambik link tu untuk dimasukkan dalam link kod diatas..



152 comments:

Mohamad Amzar said...

bole guna ke gmbr atas tuu ?

ct mysera^^ said...

wahh!! bestnye tuto nie..mmg canggih lah..^^

Wan_hazel said...

Mohamad Amzar

guna utk pae bro??guna ape??tak faham wan..

Wan_hazel said...

ct mysera^^

hehehe.,.tengs..

azhaniidayu said...

canggih ! dah try . menjadi :)

Mohamad Amzar said...

bro buat ni utk smua la ye , oke oke ! thanks , niceeeee !

pinky said...

tengs invited me to read the tutorial
dah lame beno pinky x singgh sini tgk wajah blog ni dh len
tengs 4 the superb tutorial tp t nk try lah buat hehehe ntah menjadi ke x kiter tgk je t :)

Lulu Rahman said...

jadik ! tengs wan . tapi nak tny bole ? cmne na bg dy center ? ta center r -.-

♥ Nurulz Sabeeha ♥ said...

Nak cuba lah... bookmark this page :)

Wan_hazel said...

azhaniidayu

hehehe..gud2...

Wan_hazel said...

Mohamad Amzar

ok2..ehehhe/..

Wan_hazel said...

pinky

mesti jadi nye..eehhehe..senang je

Wan_hazel said...

Lulu Rahman

tamabh kod nie kat atas skali < center> dan kat bawah skali kod nie

Wan_hazel said...

♥ Nurulz Sabeeha ♥

ehehhe...tengs

نورول فاتيحه said...

wah wah ! canggih , mcm icon shoutbox wan ^^

Wan_hazel said...

نورول فاتيحه

hehehe//a ah...semua nya utk dkongsi

Puteri Auni said...

thanks abg wan1

iqa said...

Thanks wan :)

Puteri Auni said...

tq abg wan!

Muazz Adley said...

kalau guna classic template camne..

.:|kamaryeah|:. said...

waa~
comelnyerrr~~
suke sgt3 nieh~!!!

caliph shuriken said...

kreatif ar wan.. mmg patut sy letak kt 'creative dept' aritu, hikk...

latest en3: krisis nuklear jepun

JBF ♥ said...

tab tutorial takde kee ?

afiq MD ali said...

wahh , mmg canggih tuto nih . hehe
thanks abg wan :) dah jadi dah . cantik gila ! hehe

farhana che'nasa said...

law nak buat gambar sendiri mcm mne ?

Pip Azmi :D said...

EEEEEEEEEE , gila comel (!)

amny.. said...

wan..asal amni wat xlepas ek??

nur sharfatin che abdullah said...

thnx a lot !

:anys: said...

ta jadi :(

♔ ηιηι αωσк ♕ said...

wahh abg..
adex amg nak sangat buat bende ney..
thanks ^___^

Fi-Nurul Soosica said...

wah canggih la ;D nak cube ek :) thanks !! ^_^

NadjmiNidza said...

thankss , sematt , saya amek keyh ? boleh buat tuto tak mcm mne na buat mcm shoutbox abg wan pnyaa , tutorial n lain2 . bolehh ? please . thanks :)

Wan_hazel said...

Puteri Auni
iqa


welkam..

Wan_hazel said...

Muazz Adley

wan dah kasi taw dalam entri..classic template takleh wat menu tab nie

Wan_hazel said...

.:|kamaryeah|:.

try lah wat..ehehhe

Wan_hazel said...

caliph shuriken

hahaha..tengs bro

Wan_hazel said...

JBF ♥

tab tutorial wan tak wat..ehehehe

Wan_hazel said...

afiq MD ali

hehehe..welkam...peacce

Wan_hazel said...

farhana che'nasa

ubah koding dalam tu...ganti masuk je kod link gambar

Wan_hazel said...

Pip Azmi :D

ehhehe//tengs

Wan_hazel said...

amny.

nape erk??/yg len boleh je..ekot je tuto wan k..jgn ubah kod..

Wan_hazel said...

nur sharfatin che abdullah

welkam..

Wan_hazel said...

:anys:

janagn ubah kod k....mesti boleh nye law ekot tuto

Wan_hazel said...

♔ ηιηι αωσк ♕

welkam..ehehehe

Wan_hazel said...

Fi-Nurul Soosica

boleh je..camat mencuba

Wan_hazel said...

NadjmiNidza

maksud??/wat ape erk??ajax float shoutbox wan dah wat dah...

wawa said...

tQ :) c0meyh ! dh try :) :)

Wan_hazel said...

wawa

ehehhe...welkam

Habibah said...

wan..lau wat page bnyk2, blog jadi berat tak ?
anyway, thanks coz buat tuto ni..comey sangat ! :D

Habibah said...

oh ye, lagi satu...
nasib baik matching ngan blog sy...leh tak sy mintak wan buat icon utk tutorial ?

NadjmiNidza said...

maksud sya , mcm mne na buat icon float shoutbox mcm abg wan pnya tuhh . bile cursor pegi kat icon tu , dia tuka pic , mcm tuto yg ni laa . *ngada .

Wan_hazel said...

Habibah

law wat banyak2 tak berat pun..bab page tu bukak lain2 page..nak icon tutorial...erm...nanti wan tambah kat dalam tu k...

Wan_hazel said...

NadjmiNidza

masukn je kod tuto ni dalam shout tu,,tapi susah skit...banyak nak kene wat..

Noraien said...

wah,rjin nyer dye wat tutor !

nice wan :)

farizwanVOCHELL said...

dah jadi dah . tenks

Kechik 김치 said...

wan oppa ! mau request icon utk formspring.me buleh....? tenkie u !

lieyly said...

menjadi :D
tenkiu wan 4 dis tuto ~
canggih !!

Wan_hazel said...

Noraien

tengs..ehehhee

Wan_hazel said...

farizwanVOCHELL

welkam..ehehhee..

Wan_hazel said...

Kechik 김치

ok2./..wan tambah k..edit balik lah entri nie..ehehehe

Wan_hazel said...

lieyly

welkam.e.ehhehe

sicomot-comel said...

wow..interesting..

tapi kan wan,,gmbr tu tak ubah dah ke??

nnt karang semua orang same jek..

Wan_hazel said...

tak ubah dulu wat masa skang nie..nanti wan ajar care ubah tu k/senang je..

cik iman said...

comei2...hehe

Wan_hazel said...

tengs..ehehhe

pinky said...

dh try menjadi hehehe tq :)

Wan_hazel said...

welkam..ehehee..peace

Kechik 김치 said...

Thanks sesangat ye !!!!!!!
saranghaeyo~!!! hahaha

juesamm minx said...

comelnye tutor nie..nak cbe buleh???

juesamm minx said...

abg wan..cam ne kite nak letak link tuh..yg abg wan kate ambik link tu utk dimasukkan dalam link kod diatas..
yg http://blog id =..???tu ke??n then nak letak dimane yeh link tu..:D

Wan_hazel said...

Kechik 김치

ahahha...welkam..wan nak jawab ape erk...erm..sarangburung..ahahha

Wan_hazel said...

juesamm minx

macam kat page wan nie..kan de link kat atas tu..so maksud nye wat page lepas tu copy link page tu dan letak kat tuto wa bagi tu..law page tutorial..letak lah kat kod tutorial tu

Amirah Najihah said...

Thanks . Jadiii ! Bole amik url tu ? Hee

Wan_hazel said...

welkam...ambek URL mane ???

juesamm minx said...

okeh...thankz yup abg wan..:D

Wan_hazel said...

welkam..ehehehe

Miss Kawaii" said...

wa!!! lama cari tuto ni.. baru jumpa. masey3.. ^0^ (terharu ouh!)

Wan_hazel said...

welkam..ehehhee..peace

eka said...

lau xnak ltak kat c2??nak ltak kat tepi mcm mne

Wan_hazel said...

eka..

nak letak kat side bar ke??boleh je...hehehe...

Anonymous said...

BIG THANKS ! Wan memang baik :D

Wan_hazel said...

anon..welkam..ehehhe

Atiqah Ahmad said...

x paham lah.. tikah buat satu je yg jadi... kalau jadi pun pelik sngat lah rupanya.. hmm

Wan_hazel said...

Atiqah Ahmad

law wat jadi camne tu???

❂ nini moy ❂ said...

thanksQ sdh jdi :)

Wan_hazel said...

taniah..tepuk sikit

Gamal's daughter said...

alhamdulillah..da maw la wat yang nie..trima kasih sgt2..memg mencari pun..

Wan_hazel said...

taniah..ehhee,peace

khai said...

thx wan for the tuto..i like it, :D

Wan_hazel said...

welkm...ehehe

norazwa said...

sayer ambik tau tuto ni

norazwa said...

yearhh...dh jdi..thank you

Wan_hazel said...

ok...taniah dah dapat wat tu..ehehe

noraim said...

wan, awesome! sy guna dan terima kasih :)

noraim said...

wan ,cmne nak center kan eh?

Adi Putra said...

abg wan...knpa saya punya jd tp facebook kat atas dan toturial kat bwh??cm na nak sebariskan??

Wan_hazel said...

adi

mesti ada yg tak betul dengan kod...or blakang kod salah satu sebelum kod face book tau tertinggal

Budak Giler Cadbury said...

wan untuk home, link, ngn twitter tade gambar gurl ke heee

Wan_hazel said...

tak de lak..cowei taw..hehehe

dewqra chacqk said...

tengs :) jdy ! , hehe ..

Wan_hazel said...

sama2...peace

Dianne Kawaii said...

boleh tak awak buat untuk Tumblr punye ?

Wan_hazel said...

tumblr...wan tak taw kod dia macam mana...

c_d0lliechubbiesnyll_ said...

nyll amik yeyeye

Wan_hazel said...

ok..ehehhe..peace

zana said...

waaaa akhirnya dpt gak yg ni..da lame da cri menda ni hehe thanks ye wan..tp ade yg xtau nk guna..hehe nnt usha2 la ye..hik3 thanks many many many thanks wan ^_^

Wan_hazel said...

zana

welkam many2 welkam zana..ehhehe

Mr.B.A.D.R.U.L & Miss S.H.A.E.Y.R.A said...

awat xdpt ek wan???mmg ar mncul kt blog,tp bl click fb xderk..awat cmtu??

Wan_hazel said...

dah masukn link FB??

♂♀ ♥♡ n u r n a d i r a h ♂♀ ♥♡ said...

mkseh wan! dh jdi dh!

Wan_hazel said...

sama2..

hairi said...

wan , salam , gambar selain tu ade tak ?

Wan_hazel said...

tak de lak corak lian...

Najiha said...
This comment has been removed by the author.
Najiha said...

kjap,abng wan npe klau nk klik fb ngan twitter x leh bkak?

Wan_hazel said...

letak link fb n twitter taw..

Anonymous said...

abng.yg profile tu nk ambik link dri mane.conth klau dh buat pages.nk ambik page tu sbagai profile mcm ner?

Najiha said...

hmm,xpe lh ..da jdi punn ^^
hee peace!

Wan_hazel said...

peace

amirarararara ! said...

thanks ^^
menjadi ^^

Wan_hazel said...

welkam..peace

missbunga said...

thanks wan..:)

Wan_hazel said...

welkam..peace

zana said...

wan zana amik yg ni gak ye..thanks :)

Wan_hazel said...

ok

syasyi_syaz said...

sukaa , !! ^^
tengs !

asmirul mikoto ueki-san said...

asal jda double??aiyo...pening dengan blog sndiri...hahahaha

asmirul mikoto ueki-san said...

sory2...dah jd da...but one request...mcm ne nk centerkan???tq

Yaya Simpson said...

thanks wan.lama dah nak carik tuto macam ni :)

nur'aifaa said...

wan , fon yang wan guna ni nama dia ape?

Wan_hazel said...

nama fon tu udamojial

nur'aifaa said...

okayy , thanks :)

nur'aifaa said...

boleh x code ni gune tok website ?

Wan_hazel said...

yg tu wan tak pasti lak...

nur'aifaa said...

ok2 . thank again .

aini shuhaimah said...

wah !! jadi la abg wan..tengss..=))

Myiz Nina said...

link pa tue nak kasi masuk arh ?

Wan_hazel said...

link page awak..kalau masih tak taw tu..so mknanya benda nie tak perlu kat blog awak.hehehe..peace

silobaklobak said...

Assalamualaikum wan.
wan , boleh tolong buat kan lagi satu icon tak tapi tulis freebies ?

Wan_hazel said...

leh pm wan kat Fb k..wan hazel..remind wan balik..

aSrul aZura said...

tahniah wan... moga rezeki bertambah...
sharing is caring.. ;)

putEra HyriEl said...

kod yang home or profile uwh nk paste semue ker? nk paste cmner?

Wan_hazel said...

a ah copy semua dan paste tempat kod yg satu tu...tempat yg sama..baca betul2 k

Izz Chinta said...

hi cik wan...thnx 4 d tutorial ... ^,^

|shuhadaothman|TM said...

shu mintak izin gune eh. thanks wan! :)

Isabel Diaz said...

abg wan, x da nk wana pink ka :(

Wan_hazel said...

xda...ehehe

Farra Zulaikha said...

tq very much..

LoVe cyangziey said...

thanks! hehe ^_^

NURUL FAIEZIN said...

wow! terbaiklah! thanks!! :)

Anonymous said...

thx ssgt... sy ske ssgt + sy ambil ye... thx...:)

Ash Princess Kawaii said...

ctrl+D dolo
ty before (☉‿☉✿)
ash princess kawaii