Saturday, November 27, 2010

TuToRiaL TaB MeNu

semalam fy da post tutorial nak buat backgroundkan? then ada orang buat request dekat fy mintak ajarkan cara buat tab menu..sebenarnya, ni pon first time fy buat and alhamdulillah jadi..so sekarang ni, fy nak share plak cara fy buat tab menu..

1. mula2, kene design tab korang sendiri..kalau rajin nak search terpulanglah tapi fy buat sendiri je..untuk design tab ni, fy guna adobe photoshope, senang nak maen by layer..layer 1st, fy amik dari layout blog fy supaya nampak match..send layer amik je dari object and pilih warna y seswai..lastly, barula taip nama tab tersebut..

Remove Formatting from selection
size= width 120px, height 40px
width berubah mengikut panjang perkataan..=]

2. bila da siap, bolehla terus upload..dan menjadi kebiasaan, fy akan upload dekat photobucket.com. kalau nak guna y laen pon boleh contohnya, http://imageshack.us/. terpulangla, atas keselesaan masing2..da upload amik html code dia..


3. lepas 2 pergi Dashboard ->Design -> Add a Widget ->HTML/Javascript. paste code y da copy tadi..bila da siap paste, korang klik Rich Text. inilah rupanya..

sebelum klik

selepas klik

4. step terakhir adalah link kan setiap button dengan page y korang nak..misal kata korang nak buat satu tab tutorial. blog korang mesti ada widget label kan? korang klik je link turorial pada widget label 2, then korang copy url dia..contoh macam ni..

link y korg da copy 2, korg letak la kat button TUTORIAL. cara dia macam ni..highlight button tutorial, klik button link (tgk pada pic kat bawah) dan pastekan link td..lepas 2 save la..

da pun siap..maka korang pon adala tab menu buatan sendiri..kan kan? selamat mencuba..yeay!!


68 comments :

  1. waaaa.... tq... dh lama cari tapi tak der sapan nak tolong.. tq3...

    ReplyDelete
  2. waaa fy thanx2 4 d tutor. ley try nnti :)

    ReplyDelete
  3. nice & simple en3..
    thanks for sharing fy ^^

    ReplyDelete
  4. bijak2..thanz yer tutorial nie~~~

    ReplyDelete
  5. cantik.thanks 4 sharing..tapi atok ada cara lain jugak..nak taw?

    kt cini la..klik2..

    http://petuakitasemua.blogspot.com/2010/11/atok-dah-berjaya.html

    cara ni simple sikit...

    ReplyDelete
  6. hehe amboii mcm2 dah dia reti wat kan hehe :)

    ni fatin tag fy join contest ni

    jom join contest ni...
    ni link tuan blog :D
    fatin tag fy lam contest ni
    dan fatin sebagai referrals fy tau hehe

    ni link contest 2 :)
    http://www.kawaiigadget.com/2009/11/kawaii-gadgets-contest.html

    ReplyDelete
  7. yup..itu yg basic..sbb tu atok cakap senang n simple..tp yg cucu ajar lg chantek..

    ReplyDelete
  8. ehhe thanks.. mmg cari info nih.. tq tq.. :D

    ReplyDelete
  9. bape size setiap menu tab tu ek kalo nk edit nk photoshop??

    ReplyDelete
  10. cakap camne cu? x paham la..hohoho

    ReplyDelete
  11. caliph shuriken: my pleasure caliph..

    ReplyDelete
  12. ahmad endo: sila cuba ok..senang je..=]

    ReplyDelete
  13. Nur Azila Ismail: cuba la buat, mesti lg menarik..hehe

    ReplyDelete
  14. AiMaN: thnx 4 da info atok..i lioke..

    ReplyDelete
  15. fatin hanani: thnx 4 da tag fatin..tp fy xjnji fy join tau..sorry..

    ReplyDelete
  16. ♥NuR SyAFiQah♥: sory, lupa plak nk ckp, 120pxx40px..hehe

    ReplyDelete
  17. baru tadi cari kt en.google;)
    tutorial yg ni nmpk menarik + mudah! :)
    tq ya;)

    ReplyDelete
  18. owhhh akhirnya ada yang sudi kongsi tutorial ni... thanks ya... nnt nak cuba jugak lah...

    ~really appreciate it~

    *diriku ini malas nak google carik sendiri sebenarnya.... heheh*

    ReplyDelete
  19. menarik juga ni hehee tapi aku lebih prefer gunakan pages yang di sediakna blogger je hee..

    apa pun nice info, mana tahu nak guna nanti, boleh rujuk entry fy..

    ReplyDelete
  20. Panda-B !: i xtipu ok..wcome..hehe

    ReplyDelete
  21. Latifah: akhirnya, fy pon rjin nk wat tutorial..hehe

    ReplyDelete
  22. padin: hehe..anda di galakkan rujuk entry ni.hehe

    ReplyDelete
  23. kyoshi_sousuke: sila la mencuba..=]

    ReplyDelete
  24. menarik. thanks fy :)
    thanks for sharing :)

    ReplyDelete
  25. fy, tumpang tanye sini;)
    kalau kite nak link kan terus ke page mcmn pulak ye? mcm fi buat "banner" terus ke page banner..tak pyh create post mcm "tutorial":)
    mcmn plk ye?;)
    *sowi klu fy pening;)*

    tq fy:)

    ReplyDelete
  26. QaQa: fy da reply dekat blog kamu..=]

    ReplyDelete
  27. da lama cari tutorial ni, huhuhu, jumpa jgak :)thanx for the sharing

    ReplyDelete
  28. thx... abru tahu
    tp baut masa nih xde page lain lg
    just nak kayakan info

    ReplyDelete
  29. .::: Princess MOMOY :::. xde hal la..smpan je dulu pon ok..=]

    ReplyDelete
  30. Firdani: sronok kalau org hepy dgn ape y kita ajar..hehe

    ReplyDelete
  31. fy...tlg sy lbh skit boleh x? hehehe....sy da wat sumer2 ni. n mmg jd. tp tang link 2 xm0 plak. da pening da cr ni. mana nak dpt 'widget label ' 2 ? sy da btl2 blur da ni. tlg eh. ^_~

    ReplyDelete
  32. fy...yg 2 dah tahu da. keje keras mlm td. hehehe..tp s0klan sy sm mcm s0klan qaqa 2.

    "fy, tumpang tanye sini;)
    kalau kite nak link kan terus ke page mcmn pulak ye? mcm fi buat "banner" terus ke page banner..tak pyh create post mcm "tutorial":)
    mcmn plk ye?;)
    *sowi klu fy pening;)*

    hehehe...wat tut0rial yg ni eh. thanks. ^_~

    ReplyDelete
  33. bagusnye fy ni..so sweet...byk boleh belajar ni..tapi skg ni bz kit..perlukan masa yg sesuai utk belajar..tq.. =)

    p/s:nnti,dance mat tu dah sampai,kirah cntaxt fy ye..installer tu compatible dgn sume jenis processor.xp,vista n seven.. =)

    ReplyDelete
  34. akak , nk design tag menu tuu kt mane ?
    sy tk thu nk design kt mne?
    tlg relpy k blog sy ye akak
    tlg akak :(

    ReplyDelete
  35. mcm mane nk bg center ye...plez help me =(

    ReplyDelete
  36. mmg dah lama cari tutorial ni.. thanks! tak sabar nak try.. hope jadi. tq :)

    ReplyDelete
  37. akhirnyaaaaaa!!!!!!!!! akhirnya aku berjaya membuat tab menu..(belum buat tp dh tau nk buat. ekeke..). toce2...

    ReplyDelete
  38. ALAMAK....xphm la cik fy...
    erm,bleh tlong sy x???

    ReplyDelete
  39. Fy , mcm mana plak nak listkan tutorial tuu banyak2 ? fyqa dah highlight banyak dekat situu tapi dy tetap naik satu ja ? bole komen kat sini tak ? http://fyqaanakmunsyi.blogspot.com/

    ReplyDelete
  40. cmne nak bagi button 2 duduk centre???
    saya buat duduk tepi

    ReplyDelete
  41. boleh terangkan tk mcm mane nk design tab menu tu?

    ReplyDelete
  42. thanks a lot for your tutorial. haha. seronok bila jadi, baru reti nak link kat menu, thank you sgt kak.. nice to know you, i just google...cara-cara tab menu, and sgt membantu. tq :)

    ReplyDelete
  43. terima kasih! sangat membantu :)

    ReplyDelete
  44. salam...cm ne nk dptkn link wadget label tu ea? yg u ckp kt step 4 tu?? x brape fhm la...

    ReplyDelete
  45. @Miera MasTriXia salam..fy ada buat tutor pasal tu..awk bleh cek dekat sini..ikot je steps dia insyaallah jadi..if xpam bleh tnye balik :)

    http://www.cheqppjoy.com/2010/12/tutorial-untuk-buat-link-pada-tab-menu.html

    ReplyDelete
  46. yeayyy...boleh gak akhirnye wat link ni. 3 hari 3 mlm try buat x jadi2.. tq adik.. ^_^

    ReplyDelete
  47. lame xmasuk sini...masih knl dgn ben w7?

    ReplyDelete

DoNT 4Get To DrOp Me A cOmMent b4 u LeaVe..
tQ.. =)