✿ Paid-up Advertisement ヅ

Hot Deal Everyday! Super Saver Unlimited!

Saturday, January 15, 2011

Home » , » Tutorial Buat Tab Menu Comel

Tutorial Buat Tab Menu Comel

Salam All !~

Hey korang. Tadi I ada terima request dari Kue Ziya. Beliau tanya I macam mana nak buat tab menu yang cute-cute macam I punya tu. Cute ke? HAHA! oke. actually senang je. Tapi banyak kerja sikit la kena buat. Kena sabar la ye. oke. Jom kita belajar macam mana nak buat tab menu tu ye.


First of all. Korang kena ada Adobe Photoshop. Bagi I, guna Adobe Photoshop ni lagi senang kot. Kalau nak guna Photoscape pun boleh jugak. Cara nya sama je sebenarnya. Cuma kita kena pandai-pandai lah aplikasikan nya dalam blog kita.



1) Buka adobe photoshop, pilih new. Then dia akan keluar pop-up macam kat atas ni. Make sure korang pilih saiz yang bersesuaian. Tak mau terlalu kecil atau terlalu besar. Yang sedang-sedang saja oke. Then, korang pilih transparent untuk bahagian background contents. Kalau nak yang ada warna kat belakang, korang pilih la background color.
2) After that, lepas dah pilih-pilih background tu, korang klik la OK. Then dia akan keluar pop-up macam kat  atas tu. Comel je. 
3) Lepas dah keluar kotak macam tu, korang klik la huruf 'T' yang ada kat tepi tu. Itu untuk tulis-tulis.
4) Then korang pilih pulak jenis font apa yang korang nak guna. Pilih la yang comel-comel. Baru la tab menu korang akan comel jugak. Oke. Untuk tukar warna tulisan, highlight words yang korang dah taip macam I buat kat atas tu, and pilih aje color apa yang korang berkenan di hati.
5) Dah lepas tu save la. Make sure korang pilig format PNG oke.
6) Dah lepas save, korang buka Photobucket pulak. Kegunaan photobucket adalah untuk menterjemahkan gambar korang tadi ke dalam bentuk tulisan html. Ingat! Benda ni wajib buat tau. Kalau nak guna Imageshark pun boleh. Tapi I lebih selesa dengan photobucket. Korang upload dulu.
7) Then korang copy HTML code
8) Lastly, korang apply la apa yang korang copy tadi dalam blog korang. Design - Add a gadget - HTML/Javascript - Paste HTML code yang korang copy dalam photobucket tadi.
UPDATE!!
Sorry tau korang. I ada tertinggal sesuatu rupanya. oke. Nasib baik Kue Ziya tanya I balik tadi. Pasal nak letak link untuk tab menu yang korang dah buat tu. oke, korang faham tak ni maksud I?? oke. macam ni. Kita buat tab menu kan untuk memudahkan kita direct click ke page yang kita nak kan? So, bila kita click je tab tu, secara automatik dia akan direct ke page yang kita kehendaki. So, meh I ajarkan ye.

Merujuk kepada step yang ke-7. Korang kena copy HTML code kan? so, when kita dah copy html code tu, automatic bila kita paste dekat step ke-8 tu, akan jadi macam ni kan??...   
<a href="http://s44.photobucket.com/albums/f23/nurul_izz/?action=view&amp;current=tutorial3.png" target="_blank"><img src="http://i44.photobucket.com/albums/f23/nurul_izz/tutorial3.png" border="0" alt="Photobucket"></a>
So, korang hanya perlu menggantikan code yang I highlight tu dengan link yang korang kehendaki. Maka, secara automatic bila korang click je tab tu, dia akan terus direct ke page yang korang nak. Amacam? senang tak?? :')


oke. Done. Senangkan? hmm. try lah. mana tau membantu korang nak mencantikkan blog korang? Tak susah. Cuma kena rajin bertanya dan lawat blog-blog yang banyak tutorial. InsyaAllah korang boleh. Selamat Mencuba!
Photobucket

Thanks for visiting my site.
Like and Share this entry if you think its very useful. And please do leave your comments below ya!
Love, ♥ Nurulchumel ♥

37 Chumel(s) comment ヅ:

rockinsudu said... [Reply Here Bebeh!]

tab menu yg simpel tp cute. hehe

kueziya said... [Reply Here Bebeh!]

kakak cumel.. tengsss taw ..nak try niy..

Nurul chumel said... [Reply Here Bebeh!]

@intanurulfateha

thanks syg!
tengok la sifu I sape.
bukan u ke???
hakhakhak!!

Princess banny said... [Reply Here Bebeh!]

akak chumel naper saya punyer..saya nk save tapi format takde yng png tuh..tolong !kenapa tk der plak

aQ!LaH said... [Reply Here Bebeh!]

ty s!s
dah menjad! lam blog sy
tp nape ader kaler putih2 kat tep!?
cube s!s tngk lam blog sy
http://aqilahmk.blogspot.com/

Nurul chumel said... [Reply Here Bebeh!]

@aQ!LaH

putih?
yang mane tu?dekat tepi kotak or dekat tulisan?

Nurul chumel said... [Reply Here Bebeh!]

@m!nAh ScOteR

owh.
tu mmg originally ade dlm templates u.

Miyuki Yamada said... [Reply Here Bebeh!]

Agioo~~
Sis..><"
Sy suda pning..
Cmne nk wt gne photoscape??

Nurul chumel said... [Reply Here Bebeh!]

@Miyuki Yamada

tengok tutorial photoscape dekat youtube. senang jek dik oii.

IYLDA SYAHRANIE AB RAZAK said... [Reply Here Bebeh!]

kalau gune photoscape macam mane plak ?

azy perry aziz said... [Reply Here Bebeh!]

hye..sye dh ade tab menu nie...skrg sye ade satu post dlm tab menu yg sye buat..then..sye nk tambh post dalm tab menu yg sma...tp x thu lh mcm mne..plzzz..help me

Nurulchumel said... [Reply Here Bebeh!]

@azy perry aziz

tak faham la.
ley jelaskan dengan lebih details tak?

Effa Ffarin said... [Reply Here Bebeh!]

mcm ne nak wat tab menu letak kat mn2 yg kita suka...???

Nurulchumel said... [Reply Here Bebeh!]

@Effa Ffarin

wat tab menu kat mana2 kita suka?
mmg kegunaan benda ni mmg untuk letak kat mana2 kita suka pun yang.. :')

azy perry aziz said... [Reply Here Bebeh!]

hehehe..ok mcm nie...katakan sya buat tab "produk"..sya dah add 1 post...pastu sya nk tambah lg post dalam tab "produk" sya dah xthu nk buat mcm mne,,,huhuhu...tolonglh~~~~~

Nurulchumel said... [Reply Here Bebeh!]

@azy perry aziz

kalau ikut tuto neh, 1 tab untuk 1 link post jek. unless kalau guna labels yang sama. guna link yang label sama tuh.

Anonymous said... [Reply Here Bebeh!]

salam :D
nk tanye ,nk buat credit cmne ? nk kreditkan org tu :)

Nurulchumel said... [Reply Here Bebeh!]

@Anonymous

taip je credit by : ______
pastu link kan. dah siap credit. :)

rEaliTi hIduPku said... [Reply Here Bebeh!]

nurul, saya buat cm awak punyer nie..saya ikut satu2 step.. tp bile saya click kt "contact sayer" kt blog saya 2, dia kuar kt new tab..nape ek??

Nurulchumel said... [Reply Here Bebeh!]

@rEaliTi hIduPku

mmg kdg2 boleh kuar kat new tab..jap nurul tgk jap yek.. :)

Nur SyafiQah said... [Reply Here Bebeh!]

Awak guna font apa ? comel j tengok ^^

Nur SyafiQah said... [Reply Here Bebeh!]

Jum follow belog saya ! comel belog awak (:

the story of ayrien ayana said... [Reply Here Bebeh!]

npe i punye photoshop ble na save tade png laa .

Nurulchumel said... [Reply Here Bebeh!]

@the story of ayrien ayana

takde png?
ehh? pelik. semua photoshop ada png dik. better install balik. maybe ada problem tuh..

Nor Nabillah said... [Reply Here Bebeh!]

slm sis..sis..mcm mna sis wt menu tab yg cute mcm dkt sblah kiri nih...tlg ajarkn bole..=)

Nurulchumel said... [Reply Here Bebeh!]

@Nor Nabillah

tengok dekat bahagian tutorial. dah buat tutorial dah. :)

Norazah binti Aziz said... [Reply Here Bebeh!]

Assalamualaikum, dear tumpang tanye...bila kita buat tab ni bermakna kita tak perlu buat page utk tab la ye?

Nurulchumel said... [Reply Here Bebeh!]

@Norazah binti Aziz

wslm..
betul, tak payah guna page lg dah..
sebab tab ni boleh masuk apa2 link pun..

✿ Link for Blogwalking View ヅ

Pretty Blinking Hello Kitty
© Copyright 2009 - 2013 | Full Designed by ✿ Nurulchumel's Properties ヅ | All Rights Reserved™