Tutorial : Buat tab menu yang comel!

As-salam...

Dah lama tak buat tutorial. Sekarang, kena la berebut dengan masa belajar.  Aku tak nak la yang dikendong berciciran, yang dikejar tak dapat.  Pelajaran yang utama dan menulis blog hanya sekadar hobi dan suka-suka, tol tak? ehehe.



Ramai yang request tutorial ni, kesian lak sebab mereka berharap kat aku untuk tunjukkan cara ni. Bagi sesiapa yang tak tahu lagi, tab menu adalah tab yang macam aku buat kat bawah header blog ni.

Aku nak cuba tunjukkan dengan cara yang ringkas tapi mudah untuk difahami.  Tapi, kalau tak faham jugak, tanya la nanti yer.



Mari kita mulakan sesi pembelajaran hari ni dengan membuka sebarang perisian mengedit gambar.  Kalau tak reti, boleh cuba rujuk cara kat sini. Ada sedikit basic kat situ.


aku menggunakan photoscape je, lebih senang dan simple.  Kalau nak buat kotak yang transparent, leh cuba guna gimp2 (rujuk link di atas).




Kalau dah siap edit kotak-kotak comel mengikut citarasa masing-masing, boleh la download ke dalam photobucket.com yang boleh dirujuk di entri sini.




Kemudian, buka Dashboard - Design - Add a gadget - HTML/javascript 




copy html code gambar yang telah diupload ke dalam photobucket.com ke dalam kotak HTML/javascript tu.

bila dah siap masukkan semua kod html kotak comel tu, 
tambahkan <center> di awal kod 
dan </center> di akhir kod html tu supaya kotak comel akan terletak center di atas.


info : edit html untuk tunjuk gambar, rich text untuk baca kod html.



 Susun kotak- kotak tu leklok dan pastikan rapat-rapat serta pastikan semua kotak-kotak tu juga sama besar. Boleh adjust height dan width.
Kemudian, setiap kotak comel tu hendaklah di linkkan.  Untuk linkkan kotak comel tu,  klik kotak, kemudian tekan simbol berwarna hijau (yang ditunjukkan dengan heart pink) akan kuar pop up window untuk masukkan link.



Contohnya, kotak comel yang tertulis facebook mestilah nak di link kan kepada facebook u all sendiri kan.  Jadi, klik pada kotak comel facebook dan tekan simbol hijau kemudian bukak wall facebook masing-masing dan ambil link dari adress bar kat atas tu masukkan ke dalam kotak pop up yang kuar tu.


Kalau masih tak faham, boleh rujuk tutorial kat sini yang menggunakan cara yang sama.


Bila semua dah siap, tekan save.

Tak siap lagi sebelum u all tarik kotak gadget tu naik ke atas.

seperti yang ditunjukkan heart merah jambu ituuu!
Tekan lagi save kat atas tu.
SIAP!


risau lak kalau u all tak faham, 
cepat la buat, nanti kalau tak faham boleh terus tanya.



 daa...
adioooos!

50 comments:

hudahazwani said...

kak emiey..saya paham! hehehe..

*gewdix2 manja jap* ^__^

emieysandra said...

haha..gud3
~_^

Shag said...

Shag pun paham! Thanks kasi tutor kat sini ;)

Entri terbaru Shag : Fibroid Kandungan. Bahaya atau tidak?

Siti Safiyyah said...

wahh tutor,, suke! ;D

p/s: suke la blog awak ni.pink giteww.beza ngan blog saya.hukhuk

Cikgu Fikri said...

WAh.,...
tutorial yg bgus..
er..
tutorial buat FB xder ker?
huhuuhuh :)

miszlullaby said...

ooo..camtu ke..nk try jugaklah.kire kite xgune r tab menu yg blogspot sediakan ek...oooo...

Cahaya Kehidupan said...

rajin lah cikgu emiey buat tutorial,yaty ni dari hari ke hari tak buat2 juga tutorial ,bila orang tanya,yaty bagi link je..hehe =P

nazirulhazwan~ said...

fuh, ebat rupenye ang ea:P
ajar cmner nak masuk majalah remaje boleh??:P

Nurulezzah said...

rajinnya wat tuto.
thanks for sharing :)

zOeY zAu YaH said...

wahh nanti boleh try nih hihi..

Anip said...

wah, tutorial tp aku dah gune wordpress, dulu aku mnt gak edit2 blog nie..

BLOG GEMPAKZ SIOT

emieysandra said...

cikgu fiq : sign up je la..grrr!

naz : xabih2, u kne jd remaja la..asyik jadi datuk jerrr :P


thanks for comment here!
i'll jengah balik

:D

Dee Dee Kidrauhl said...

kak , knpe kluar due ?

emieysandra said...

Dee : ape yg due?

Nordin said...

wah, mau try nanti la :)


Luahan hati lelaki kepada wanita

Wan Gerrard said...

terbaik la emieysandra si comel, gerrard cari benda ni..nak buat la..k thanks ^_^

kue ziya said...

kakak...paham paham

zieyera said...

x paham la bhagian link 2..jiey dah cba dah xdpt lg..jiey x paham pat (Contohnya, kotak comel yang tertulis facebook mestilah nak di link kan kepada facebook u all sendiri kan. Jadi, klik pada kotak comel facebook dan tekan simbol hijau kemudian bukak wall facebook masing-masing dan ambil link dari adress bar kat atas tu masukkan ke dalam kotak pop up yang kuar tu.)

emieysandra said...

zieyera :- cube buat satu2, 1)tkan kotak comel 2) ambik adress link 3)masukkan link dlm kotak pop up lepas tkan simbol hijau

:)

Amir Izzat said...

laa..macam nie nak buat ropernya...thanks! nanti nak try lah..kena reka tab menu yg cun dulu...ehhe

.nuruashia. said...

dear.. ta reti laa nk wt yg list bayak2 tu.. contoh kmo punye kn, bile tekan button tutor akn kua list tutorial.. kalo nk wt list of tutor tu kene wt new entry ke? =( help meee...

emieysandra said...

yup..buat entri len dan link kn nyer.

Satu lagi cara buat kat page, tapi xyah add widgetnyer tu..:D

emieysandra said...

satu lagu cara buat gune widget label. cthnye tab menu lagu kt blog ni, semua entri bwh label lagu.

:)

.nuruashia. said...

yg wt kat page tu cmne ek? aduhhh fening2..

.nuruashia. said...

dear.. ta paham...=( yg page tu kene wt cmne? ta reti ahh..

Bella said...

wow! thanks..sy da apply tutorial ni tuk wat button..bestnya da berjaya :)

kura_kura kecil said...

assalam..dh lme cri tuto ni. tuto len sume ssh nk uat. yg ni snang sk8. tp xpham sk8 la yg kt nk link 2. okeyhh yg nk link facebook tu pham. cbe awk trngkn yg tab tutorial lak. cm ne nk uat bnyak2 link tu.. xpham la..

pelangi_aien said...

akak . mcm mne buadd sidebar background tuu ?

syasya said...

mcm mne nk msokkn link page yg kite buat contoh nak buat tuto tpy nk kne link age kn??
mne nk dpt link page tuh???

yuyuakochan92 said...

tau buat y facebook jewp.... nak buat yang pasal song n tutorial tuu, camne kak T_T

Noor Idayu binti Azmi said...

akak, ajar la camne nak link kan page macam tutorial tuu :( cedih nie asik error jewp

shera said...

sangat-sangat cumei...nak terai gak ar...

uNa fiEy said...

tq sis...sgt cantek..hehe

EimaruSi|ence™ said...

entri nih bestlah. saya dah follow. follow balik eh. nak try sat.

Anna King said...

tQ yee.. saya da cuba tutor u ni... ^^

Budarx_Dis17 said...

lhoO, mcm mna mao buad ne, saia da cuba, bole mmg bole, tp mcm mna na tulis or tmbah ap - ap kt dlm nyaa,

emieysandra said...

xphm ng soalan Budarx_Dis17..klu nk buat perkataan..ambik simbol T je la~

Sunshine said...

Faham ! hehe , sng jer ea ? igt an ssh . thnks !

Aina Amirah said...

Thanks , Sudah Menjadi .Tutorial ni amat Berguna :)

CinderLaLa said...

on the way nak faham..hehe.. Thankss for sharing.. Pening gak nih nak google tutorial yg best.. :D

NUR AZFARAH said...

tengkyu so much!dah lame dah azfa cari tuto ni..menjadi!btw,azfa dah follow awak...jemputlah singgah kt blog azfa n follow..

fifi naZifa said...

FAHAM ! cum yg bawah tu tak faham sangat xD knp kena link kan dia dan knp kena tekan benda hijau tu. kalau tak tekan tak jadi eh ?

N'yue said...

nice blog...totu ni mbantu sy dr keliruan...

ZieShop said...

salam..emi saya dah buat try awk tgk cuma link xreti nk masuk..

pssksb said...

akak buat dah jadi..tq... tapi macammana nak hilangkan background menu bar tu?

cik ruru ahiru said...

terima kasih sgt2 ..
cubaan menjadi gak .. ♥

Cute Girl said...

Mcm mana nak wat gambar tulisan 2?sebagai contoh:facebook

emieysandra said...

Cute Girl :- cube design sendiri, buat yg simple2 je dulu =)

Nur Amalina Maisarah said...

dah macam-2 tuto jmpe cre buat ni tp ni pling senang :D tengsss ^^

Miss November said...

Alhamdulillah . dapat buat . thankyouuuu . hhe . ;)