[klik it]

Saturday, January 29, 2011

[Tutorial] Macam Mana Nak Buat Tab Menu?



Salam. Memandangkan ramai giler yang request dengan aku, macam mana nak buat tab menu, maka dengan ini, aku dengan murah hati, nak kongsi ilmu dengan korang :) Baik kan aku? Haha :D

Haaaaaaaaa benda yang kat atas ini lah yang kita namakan tab menu. Ok fine. Nak buat benda ni memang susah nak mampusssss ! Aku pening kepala bila buat benda alah nie -.-


Credit untuk Kak Intan sebab aku belajar dengan die :) Punyalah aku tak faham sangat-sangat, sampaikan die call aku taww sebab nak explainkan macam mana. Haaaaaaa ~ Ada berani nak buat ker? Hehe ;p


PERTAMA


Mula-mula korang kena ada tab menu tue. Ok. Macam aku punya ni, aku edit-edit dekat Picnik. Dekat Picnik, kita boleh edit tab menu ni sesuka hati kita.


Macam aku punya ni, aku amik gambar colourful. Aku nasihatkan korang guna background gambar tab menu yang kosong sebab nanti orang lain boleh tengok tulisan die :)


Size untuk tab menu adalah 100 x 40 pixel ! Ingat tuuu ~ Kang kalau tak, tak jadilah die :)


Ok kalau dah siap save dulu korang punya tab menu tu


KEDUA


Korang kena dapatkan URL bagi kesemua gambar tab menu yang korang buat tadi. Macam mana? Korang boleh uploadkan dalam Photobucket untuk dapatkan HTML Code die tue.


Tapi cara aku? Haha :D Konfem korang gelak punyaaaa . Aku upload dalam akaun Friendster aku. HAHA :D Sebab kat Friendster dia ada sediakan khidmat untuk dapatkan code-code gambar ini. Hehe :)


Tak faham? Tengok gambar bawah ini



Yang anak panah tu adalah macam mana nak dapatkan code gambar dan yang dalam kotak biru yang aku dah buat tu, adalah code bagi gambar home aku tue :)


Dah buat? Ok lets proceedd ! :D


KETIGA


Pergi ke Dashboard > Design > Add A Gadget > HTML/Java Script



Korang copy code-code gambar tadi kemudian paste kan di kotak HTML/Java Script dan dia akan jadi macam gambar dekat atas nie. Pandai-pandailah korang anggarkan berapa banyak space korang nak letak antara tab menu tue


Jangan bimbang kalau die ada terlebih ke bawah macam dalam gambar atas ini. Sebab tak ada effect apa-apa pun


Kalau lepas korang copy dan kotak tu akan keluar code-code macam dalam gambar atas ini, cepat-cepat klik 'Rich Text' kat atas tue. Aku dah buat arrow dalam gambar atas supaya korang faham


Kalau boleh kita tak nak code-code tu jadi macam ini sebab kita nak dapatkan gambar sebab nanti senang kita nak hyperlink kan die :)


Faham? Ok nexttt ! >


KEEMPAT


Lepas tu, korang pergi ke Dashboard > Posting > Edit Pages


Haaaaaaa ~ Ramai yang tak tahu apa function pages ni kan? Meh sini aku nak bagitahu


Pages ini adalah dimana kalau korang klik satu link atau gambar yang telah di hyperlink kan, dia akan bawak kita ke satu pages yang lain. Err faham tak?


Macam ini lah ! Kalau korang klik butang 'Tutorial' dekat aku punya blog ni, die akan keluar satu pages yang lain kan? Haaaaaa ~ Itu lah PAGES ! :D Adoii ~ terlebih excited lah pulakk ! -.-


Lets prodceed. Korang klik 'New Page'



Dia akan keluar satu window yang lebih kurang macam ni. Ok fine. Memang sama macam bila korang nak update blog tu kan? Tapi ni adalah PAGES ok? Bukan POST !


Dekat Page Tittle tu, suka hati korang lah nak tulis apa-apa pun. Contohnya, korang nak buat pages ini pasal diri korang kan? So korang tulis je lah 'About Me' keee. Hehe :) Macam gitu lahhhh ~


Lepas dah siap tu, korang boleh klik Preview, nak tengok jadi ke tak kan? Kalau dah puas hati, korang tekan lah Publish Page ! :D


Lepas korang tekan Publish Page tu, mesti akan ada keluar macam kat bawah ini kan?



Haaaaaaa ~ Jangan takut, jangan bimbang weyyhh ! Ni hanya cobaan sahaja ! HAHAHA :D


Korang klik dekat Blog Tabs dan cepat-cepat tekan butang Save and Publish tue :)


Bila korang view blog korang, die akan terpapar macam dekat gambar atas ini kan? Mesti korang pelik kan? Dah tu mana tab menu yang aku edit cantik-cantik tadi?! Haha :D Sabar cik kak, cik abang dan cik adikk. Aku nak bagitahu lah nie


Tapi sebelum tu, teruskan buat berapa banyak pages yang korang nak buat dan ulang benda yang sama macam aku bagitahu nie :)


Dah siap semua? Ok nextt !


KELIMA



Ok. Mesti korang tertanya-tanya kan, apa kaitan antara dua gambar yang aku letak kan di atas nie? Hehe :)


Ok macam nie. Korang tekan pages-pages yang korang dah buat tadi. Kemudian korang copy link die yang ada kat bahagian atas sekali ! Yang mana? Yang macam nie haaaa ~ -.-



Haaaa ~ Korang copy link kat atas ni ok? Lepas tuuu pergi dekat HTML/Java Script pulakkk


Dekat sini, korang klik mana-mana gambar tab menu yang related dengan Pages korang yang korang copy tadi. Contohnya macam ini, kalau korang copy link Pages korang yang berkaitan dengan pasal diri korang, korang klik lah gambar tab menu yang ada tulis pasal korang. Faham tak?


Lepas dah klik tu, akan ada kotak-kotak putih yang kecik di sekeliling tab menu yang korang klik tu. Ok lepas korang dah klik, korang tekan butang HyperLink. Kat mana butang tue? Tengok kat gambar atas ini. Aku dah bulatkan untuk korang.


Lepas dah tekan, akan ada satu window keluar. Then korang paste kan link yang korang copy tadi dekat window tue. Then save ! :D


KEENAM


Teruskan buat sampailah korang dah habis paste kan link-link pages dalam tab menu korang. Lepas tu tekan je butang Save dekat window HTML/Java Script korang macam dekat gambar bawah ini


Lepas tu korang boleh lah letak kan kat mana-mana korang punya tab menu tu kat layout korang. Tapi aku nasihatkan korang letaklah kat bahagian atas blog korang atau bawah header korang macam aku buat nie :) Kang senang orang nak tengok dan klik jee :)




Haaaaaaa ~ Korang letak lah tab menu korang tu kat bahagian atas tawww ! :D


Then view lah korang punya blog ! Wahh ~ Dah ada tab menu korang sendiri kan? :D


KETUJUH




Apa yang akan terjadi dengan korang punya tab menu yang simple ni? Alaaa ~ Yang masa koragn buat mula-mula tadi. Hehe :D


Tak usah khuatir. Nampak tak butang Tools yang kecik tu kan? Korang just remove jeee ~ Tak payah takut sebab korang kan dah siap copy and paste and buat tab menu yang jauhhhhhh lagi cantik and comel kan? So yang ni kita remove je lahhh ~ :)


DAH SIAP !


Haaaaaaaaaaaa ~ pening kepala tak? HAHA :D


p/s ; Tolonglah baca dan fahami betul-betul apa yang aku buat nie. Jangan mudah berputus asa dan jangan cakap "saya tak tahu buat" sebab kalau aku boleh buat, korang pun mesti boleh buat. Ok? :D



TAHNIAH kerana berjaya membaca entry ini sampai habis! :D

Post a Comment

LinkWithin

Related Posts Plugin for WordPress, Blogger...

[klik it]