[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

63 comments:

Izzatul zauli said...

HAHA ! panjang tak hengat . dah lama nak buat benda nie , tapi tak ada masa . mungkin lepas SPM bualn 12 nant . bhahaha ! btw , nice tuto :)

amie said...

memang nampaknya kena makan masa nak buat benda alah ni..tapi sangat nice..setelah 2 bulan sy join gengblogger ni, ni blog pertama yang sy klik best utk dia punya artikel..
sangat-sangat thumbs up
http://belogapasajajadi.blogspot.com/2011/01/berry-slider-apputk-pengguna-blackberry.html

Mysara Newrie said...

Izzatul : haha ;D tu lahh ~ pening kepala nak buat tuto nie. btw terima kasih yer :)

Mysara Newrie said...

Amie : Wah ye ker? eh awakkk ! terima kasih tawww ;D

ieda said...

susahhhhh .. pening kepala akak huhuhu leh tlg buatkan .. dah lah akak nie suku IT huhuhu

Mysara Newrie said...

Ieda : Mmg susah kak. Tapi takpe. Akk cubalah buat dlu. Follow dulu satu persatu ok? :) Jangan mudah menyerah kalah !

Arpiiz said...

haha, jumpe pun tutor macam ni, puas cari tapi tak jumpa..thanks ya..^^

ena amir; said...

serius tak paham. macam susah gila. tapi i suka bab2 main dengan edit2 and code2 nih. tapi this time memang complicated

Bintun Sazali said...

hehe..betul2..bukan sng nak wt mende nih. kena byk explore. sy? smpai ada blog private sbb nk wt ujikaji. haha

jap2..ape bezanya kalau kite tekan "blog tab" dan "no gadget" masa dy tanya nak post camne tu? sbb sy pilih no gadget. err..faham tak soalan sy? huhu

Mysara Newrie said...

Arpizz : Yeah ur welcome :D

Mysara Newrie said...

Ena : Agak susah lah jugak nak buat benda nie -,- Tapi takpe. Kalau sabar n faham betul2, rasanya boleh buat :)

DiriKu said...

pendeknyeeeee!!!hahahhaa..nice tutorial dear....nanti la..akan dibelek kembali tutorial ni...terima kasih ya :D

Mysara Newrie said...

Diriku : aah. mmg pendek punn ! haha ;D

nat said...

ok dh buat
tp kn cm ne nk uat new post untuk page.fening.

Mysara Newrie said...

Nat L: Pergi kat Posting dan tekan kat Edit Pages :) Masa tu ada New Post untuk buat yang baru dan edit pages yang sedia da

★ ⒶⒾⓈⓎⒶⒽ ★ said...

saya dah cuba...
besh larh...
hik3...
thanks...~

Mysara Newrie said...

: Baguslah kalau awak dah boleh buat :)

afifah. said...

oh ! thxiuu so much for da tuto ! i sukaaaaa ! :) baru buatt tauu . cari punya cari tuto ni rupanya ada kat belog ue .. thx3 ~ :)

Akeyla Azmey :) said...

hihihihihi , membebel je tahu :p
hahaha . it's superbbbbbbbbb !
lof yah mysaraaa .

Faqihah Husni said...

Hey! Macam mana nak buad kalau kita tekan tab 'lirik' dia naik tajuk lirik sahaja, ianya x naik sekali dengan isi2nya. Please!

amira nasir said...

EVEN PAnajang gila..tapi paham la..bagus..buat la bnyk lagi..:)

nonaa nelson said...

I failed to to this tutorial :(

si chinta hatii said...

akan cubaa, thankss ;)

si chinta hatii said...

okay, cemerlang, menjadik, thanks banyakkk ;)

ezai said...

knp ekk untuk cra yg keempat(choose style menu 2)xde bile saye wat?bile klik kt publish die trs succes..xde suh pilih pon..wuwuw

AinaLedlykey said...

akak , kenapa tak bole ? bile saya remove tools tu , saya tekan kat about me , kat contact yng saya buad tu tak kuar langsong ponn ? -,-

cemat_88 said...

uhuhuuuu.....susah juga ya... tp sy da faham da...

nurul said...

waah! time kaseh sesangat! penat mencari post pasal ni =)

fiqah said...

dah dapat buat. thank u so much!

Edy Ramanov said...

tenkiu bagi tutorial. edy dh follow kat sini.

http://edyramanov.blogspot.com/2011/07/ben-ashaari-cari-blogger-baru-jer.html

FattKiraa said...

pergh . . panjang giler . . memang da lame da cari bende ney . . xpe2 . den bace n paham kann slow2 ea . btw, tq so much . . =D

AINA UNGU said...

paham , and dah buat .. tapi bila copy and paste gambar dalam html tu , tak keluar gambar =.=' and bila preview keluar codecode tu je ... size dah betul 10x40

Mysara Newrie said...

Afifah : Ye ker? hee ur wc :D

Mysara Newrie said...

Akeyla : TQ :D lof yeah ! :D

Mysara Newrie said...

Farihah : Awak tulis dulu tajuk lagu lagu tu sahaja then link kan tajuk lagu tu dgn page mana2 yg awak nak letakkan lirik tue :)

Mysara Newrie said...

Amira HAHA :D insyallah ~ skrg ni tak ada masalah :)

Mysara Newrie said...

Noona : Jangan macma tue :) Teruskan lagi :) Insyallah ~ lama2 nnti boleh lah :)

Mysara Newrie said...

Chinta Hati : Ur wc ! :D

Mysara Newrie said...

Ezai : Eh yang mana tue? tak fahamm

Mysara Newrie said...

Aina : Awak buat dulu kasi kuar tab menu awk dulu then baru remove die punya tab menu yang asal tue. cuba dulu :)

Mysara Newrie said...

Cemat Memang susah tapi lama2 nnti oklah tue :)

Mysara Newrie said...

Nurul :UR WC :D

Mysara Newrie said...

Fiqah : Ur wc :D

Mysara Newrie said...

Edy : Ur wc :D

Mysara Newrie said...

FattKiraa : Heee okayy ur wc :D

esyaown's said...

kak mysara nak tanye ni,,
dkt tuto kak mysara kan ad yg cam ny kan,,

>Adakah blog anda berfungsi?
>Bagaimana mengelakkan Blogwalking palsu?
>Cara nak ping blog di Geng Blogger

macam mana nak buat ek??

Mysara Newrie said...

Esya : Ouh yg tu :) Yg tu lah gunanya pages :) pages ni adalah bertujuan untuk buat satu entry dan letakkan link dia di mna2 kita nak letak. Macam yg cth mcm sy punya, tab menu owner, tuto, bloglist tu adalah contoh pages yg saya buat :)

esyaown's said...

boleyh buat ek bnyk2 yg macam kt tuto uh,, bkn tak leyh lebih 10 ek??

shukhairi shuhaimi said...

xdapt catch up dgn step num 5..why when i click on the photo there is nothing happen..

Mysara Newrie said...

@esyaown's Eh bukann ~ Yang tu awak guna point arau bullet je dekat bahagian pages awak tue :)

Mysara Newrie said...

@shukhairi shuhaimi Awak make sure awak klik kan gambar tu then baru awak tekan ke hyperlink then baru kuar lah satu window kecik utk awak letakkan ke mana pages tu nak bawak awak nanti :)

ecah said...

salam akak....xfham la yg time prgi kt picnik 2...yg kt ctu nk wt cne????

Mysara Newrie said...

@ecah yg kat zitu awak just kena resize kan je die punya die saiz gambar tue. Klaau tak boleh buat kat picnik, buat kat Photoscape pun takpe :)

melawa lifestyle said...

macam mana nak centerkan semua tab tu ?

Nuey Anadenies said...

Thnx , tuto mjd ! =) .

Mysara Newrie said...

@Nuey Anadenies ur wc! :D

SyasyaDestinyKyle said...

Salam , Akak saya tak paham lah bile yang dekat picnic tuh . Camne nak bwad ?

Hafyzah Anuar said...

adoii~
mamposs nak baca..satu ape pun xphm..tpi saya cuba la~hhee

ZieShop said...

thanks..dah dapat buat dah..

dayana dahari said...

SAMPAI SEKARANG SAYA PENING NAK BUAT...

A140744S1K3 said...

kat mne nk cari add gadjet??xjumpe soryy

Charlene Chloe said...

Thanksssssssssssssssssssss !! banyak gila tuto tengok tak faham2 . hanya ni je yg masuk otak!!! thanks the very stronggggggggggggggggg ~ 8excited nak mampus*

cintaku untuk said...

maaf saya baru belajar buat blog saya cuma nak tanya lepas da buat tabs menu mcam mana kita nak tulis isi dia maksud saya macam bila kita tekan contact ada sama jugak yang lain macam mana yea harap boleh tunjuk ajar heee (n____n)

LinkWithin

Related Posts Plugin for WordPress, Blogger...

[klik it]