Tutorial 19 : Membuat Tab Menu Cantik ( dekorasi sendiri )

Saturday, December 4, 2010
Salam..
Sebelum ini i dah buat tutorial tab menu tapi versi blogger..ia amat simple..so sekarang i ajar yang cantik punya tab menu tapi u all kena rajin la ye..jangan malas! kena rajin nak dekorasi dan edit2 ok..
i pun terpaksa design untuk blog tutorial walaupun i lagi suka simple tab menu


1. First sekali u all kena design dulu box dia macam ini..ikut kesesuaian ye..i guna photoshop je.



Ini contoh tab menu i...size= width 125px, height 40px

width itu u all kena edit ikut saiz dan panjang tulisan ok!



Di mana nak edit ? u all boleh guna Photoshop atau kalau nak senang guna PICNIK


2. Lepas dah design semua itu tolong upload ke Photobucket..kalau tak ada akaun sila buat akaun..atau kalau dah ada akaun lain untuk get picture html tak perlu guna Photobucket


3. Lepas itu ambil HTML code dan pergi ke Design> Page Elements > Add a Widget>HTML/Javascript

Letak semua html code yang u all design tadi..ke dalam add widget seperti ini..


4. Selepas itu click RICH TEXT...dan akan terjadi seperti begini..




5. Selepas itu susun la dia ikut turutan yang u all suka..dan link kan box-box itu mengikut URL web yang u all nak boxkan...klik box dan tekan create link di sini..



yang sepeti i kotakkan itu..


6.. SAVE..try tengok..

p/s : nak center just letak code ini <center>  bahagian first skali dan </center> bahagian last skali.


Sila komen...
Labels:
SHARE:

59 comments

  1. Balqis AzharDecember 5, 2010 at 3:16 AM

    like!

    ReplyDelete
  2. pN.rOsDecember 5, 2010 at 1:16 PM

    waaaaaaaaaaaaaaaaaaaaaa ...sukanya . akhirnya jumpa gak tutor ni adoiiiii...
    tak try agiiii... mekasih sis. nak try skang gak haha

    ReplyDelete
  3. NurfarahDecember 5, 2010 at 1:51 PM

    @pN.rOs


    okeh..sila try..ye..selamat mencuba..

    ReplyDelete
  4. AnonymousDecember 23, 2010 at 3:02 PM

    ahaaa...
    da cube..cntek!
    tq...

    ReplyDelete
  5. ApitJanuary 26, 2011 at 2:15 AM

    mcam mne nak amek link tuh ye sedang kan kita blom wat pape agi ? kene buat page dulu ke ape ?

    ReplyDelete
  6. InibelongeqaJanuary 26, 2011 at 6:42 PM

    nice ! (: tengss

    ReplyDelete
  7. AnonymousJanuary 29, 2011 at 12:24 AM

    akak,mcm mana nk edit huh???
    saya x tahulh...

    ReplyDelete
  8. NurfarahFebruary 3, 2011 at 8:02 PM

    @MiSz IeyFa

    gunalah photoshop..atau pic nik

    ReplyDelete
  9. Misz_kPopholicFebruary 12, 2011 at 11:27 PM

    akak..mcm mana nak wat kotak cmtu? sy ada p picnik tp still x tau cmna nak wat

    ReplyDelete
  10. Putri Sayang Kamu (PSK)February 13, 2011 at 9:17 PM

    wow ! dah dapat buat ! thanx so much dear . check my new tab menu . hehe

    ReplyDelete
  11. NurfarahFebruary 14, 2011 at 12:00 AM

    @Jenny99

    akak guna photoshop..kalau nak guna photoscape pun boleh..adik try guna photoshop g senang

    ReplyDelete
  12. NurfarahFebruary 14, 2011 at 12:01 AM

    @atiEy_[azHa]

    Dah tengok..cantek..tahniah :)

    ReplyDelete
  13. Misz_kPopholicFebruary 25, 2011 at 5:44 PM

    akak..naper saye wat dia x kat atas tp kat side bar????

    ReplyDelete
  14. Misz_kPopholicFebruary 25, 2011 at 5:57 PM

    akak.... naper jadi besar gedabak????huhuhu

    ReplyDelete
  15. NurfazzyMarch 2, 2011 at 2:50 PM

    akak..dah wat tapi xleh link kn box tu la..
    cam na ni..? uhuhu..

    ReplyDelete
  16. NurfarahMarch 2, 2011 at 5:34 PM

    @Jenny99

    dragkan bahagian atas sekali iaitu bawah header

    ReplyDelete
  17. NurfarahMarch 2, 2011 at 5:35 PM

    @Jenny99

    buat ikot saiz yang akak cadangkan..klau saiz len memang gedabak ler hehehe

    ReplyDelete
  18. NurfarahMarch 2, 2011 at 5:36 PM

    @Nurfazila Suhaide

    click rich text dan click kotak satu-satu dan tekan untuk linkkan mcm dalam gambar

    ReplyDelete
  19. jasmine jaszleeMarch 3, 2011 at 4:07 PM

    cantik ! hope sangat menjadi . byk tuto u i gune . sume oke ! thx yaa !

    ReplyDelete
  20. ayna jerwkApril 23, 2011 at 11:39 AM

    mcm mane nak buat ? ta phm la

    ReplyDelete
  21. NurfarahApril 23, 2011 at 9:29 PM

    to all : thank so much muahhh

    gunalah photoshop atau photoscape

    ReplyDelete
  22. Syafienaz ShariApril 28, 2011 at 10:49 PM

    camne nk wat gune phtoscape kak

    ReplyDelete
  23. shaazeera dee ciniApril 30, 2011 at 3:46 PM

    akak cm ne na design box 2 ?

    ReplyDelete
  24. Ellisa SyafiqahJune 15, 2011 at 9:57 PM

    Thanks akak! Really Pretty!

    ReplyDelete
  25. Alif HafiziAugust 6, 2011 at 8:44 AM

    Kak Farah..Cam maner taknak kasi dier bukak dih New tab..biar dier bukak di tab tu jugak

    ReplyDelete
  26. NurfarahAugust 6, 2011 at 10:09 AM

    @Alif Hafizi

    kalau buat tab menu ni memang automatik dia buka ne tab baru tapi kalau nak buang try cr tutotial automatic tab menu di blog tutorial dan cr code tu dan buang

    ReplyDelete
  27. Syazwani MSAugust 6, 2011 at 12:04 PM

    akak ! x reti laa nak guna photoscape ? ajar laa

    ReplyDelete
  28. Di JinX IIAugust 12, 2011 at 9:17 AM

    Owh..thanks kak farah..dah jadik pun haha

    ReplyDelete
  29. purpleliciosSeptember 28, 2011 at 10:58 AM

    @pN.rOs
    da tw2..thank ya

    ReplyDelete
  30. roseOctober 11, 2011 at 12:18 AM

    nk wat background cntek2 . akak tlg bt tutorial tuk background yg cntik2 . xtau nk cari kt ne :)

    ReplyDelete
  31. LolOctober 14, 2011 at 11:52 PM

    Akk, configure HTML/Javascript tu ade kt mane?

    ReplyDelete
  32. Syida SyadzlinOctober 16, 2011 at 6:16 PM

    @pN.rOsmacam manak wat yang dekat atas tu macam mana nak dapt gamabra tu

    ReplyDelete
  33. fararaaheeenajwaaOctober 27, 2011 at 12:15 PM

    pening lorhh :O

    ReplyDelete
  34. biela storyNovember 4, 2011 at 5:56 PM

    thanks bagi tuto nie..

    ReplyDelete
  35. Kim Eun SungNovember 12, 2011 at 3:35 PM

    saya x pandai edit laa

    ReplyDelete
  36. Siti NuraisyahDecember 2, 2011 at 2:16 PM

    kak...saye x paham la..

    ReplyDelete
  37. nurhaziqah_ikahDecember 4, 2011 at 2:09 PM

    thnks...dh jdik!

    ReplyDelete
  38. Nur Syairah Farhah♥December 6, 2011 at 2:02 AM

    Dah jadi ! InI lah yang ditunggu2 . thankss :)

    ReplyDelete
  39. rEaliTi hIduPkuDecember 21, 2011 at 6:37 PM

    hye..saya da try..jadi..cuma, bile saya click kt tab 2, mesti keluar kt new tab.cm ne 2 ek? confius

    ReplyDelete
  40. Lots Of LoveDecember 27, 2011 at 9:34 AM

    susah nyerr :(

    ReplyDelete
  41. UnknownJanuary 19, 2012 at 9:15 AM

    huhu..nak tanye..macam mane nak tambah link kat tab menu tu? contoh macam kita letak tajuk kat tab u 'galeri, lepas tu dalam tab menu tu plak ade sub link.. Kalau macam letak link untuk 'Home' & 'About' tu saya taw la nak masuk link.. Tapi tau yang tu je..buat la tutor tu gak.. ^_^


    yayiekisahkami.blogspot.com

    ReplyDelete
  42. RieHaNa D'luversJanuary 26, 2012 at 5:01 PM

    @pN.rOsakak macam mne nk edit?? tk tau

    ReplyDelete
  43. niNasFebruary 11, 2012 at 2:40 PM

    tak faham la ...tlong la bagi link dia ..

    ReplyDelete
  44. UnknownMarch 25, 2012 at 5:19 PM

    @♥Miss Farah♥ kakaq , knp bile ain klik klua tempat yg ain ambil html 2 ? adehh !

    ReplyDelete
  45. Miss MushroomAugust 27, 2012 at 7:05 PM

    kak farah saye ade problem with photoshop . saya memng dah pernah download it but i tak bolh bukak .. although i have try beberapa kali .. but still gak tak ley open.. can u help me?

    ReplyDelete
  46. UnknownSeptember 1, 2012 at 10:04 PM

    senanggggnyer...thanks..puas mencari..hehhe

    ReplyDelete
  47. UnknownNovember 18, 2012 at 12:36 AM

    dulu paham la , semenjak dashboard baru nie teros tak tau :) apa jadi dengan blog pon tak taw :) tolong buad tuto dalam dashboard baru

    ReplyDelete
  48. ●иυяαιиα נαzмєєяα●November 28, 2012 at 11:37 AM

    Kak,Saya tak tahu nak ambik code tuh macam mana.. ajarkan kakk..

    ReplyDelete
  49. ummu ippahDecember 20, 2012 at 12:09 AM

    HTML CODE ambik kt mne eh?

    ReplyDelete
  50. FarYana92February 3, 2013 at 7:36 PM

    tq ekh..akhir nya jumpa gak tuto nie :)

    ReplyDelete
  51. fesela dollyFebruary 20, 2013 at 3:02 PM

    boleh edit guna photoscape tak?

    ReplyDelete
  52. UnknownApril 5, 2013 at 2:02 PM

    nak tanya macam mane nak masukkan tab menu tu kedalam blog saya tak faham boleh terangkan dengan terperinci lagi tak...bye cik farah

    ReplyDelete
  53. mimi zakariaJuly 11, 2013 at 5:39 AM

    pertama kali msuk blog nie..trus cri tuto yg diperlukn..teramat berterima kasih kt farah..tuto yg snang difahami..dgn mudah mjadi pun..cantik betul blog farah , perfect betul..klau sudi singgah la blog sy tgok hsil keja sy ikut tuto nie , hehe..tp xdek la secantik farah punya

    ReplyDelete
  54. yayaJuly 26, 2013 at 11:50 PM

    thanks for the awesome tutorial..deebak! =)

    ReplyDelete
  55. Hana SakuraJanuary 11, 2014 at 3:47 AM

    I loikkkeee !! 10000xx

    ReplyDelete
  56. Hana SakuraJanuary 11, 2014 at 3:48 AM

    visit my blog
    http://hanasakura551.blogspot.com/

    ReplyDelete
  57. AnonymousFebruary 11, 2014 at 5:03 PM

    @Jenny99CODE HTML ambik kt mne?

    ReplyDelete
  58. Wan Punya LaApril 5, 2014 at 1:00 AM

    Thanks Dapat Pon...

    ReplyDelete
  59. Syiqin AzmiJune 6, 2014 at 11:01 PM

    Miss Farah.
    Miss Farah Pakai Template Blog Yang Mana?

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Home
Subscribe to: Post Comments (Atom)

Related Posts
© Blog Cik Nurfarah
Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH