HOME PORTFOLIO SERVICES CONTACT ME TERMS & CONDITIONS CUSTOMER FEEDBACK

Jul 1, 2011

Tutorial Blog | Cara mudah membuat tab menu yang comel

Salam to all readers..


Wah dah masuk bulan baru dah.. Bulan julai..Suka sangat sebab bulan birthday dil, 17hb julai ini...heheh..*ngidam kek birthday..


Okayla, untuk entry kali ini, dil nak tunjuk cara mudah untuk membuat tab menu yang comel.. Actually, kelmarin lagi nak buat entry pasal ni, sebab ada rakan blogger yang mintak dil ajarkan cara-cara nak buat tab menu tu.. Tapi semalam, blog dil ada problem sikit, error 404 tu laa.. Langsung tak boleh bukak dashboard..


Ini adalah contoh tab menu yang dil guna untuk blog dil..










Sila tekan READ MORE untuk melihat tutorial cara mudah membuat tab menu yang comel





Step 1


Sediakan gambar tab menu yang korang nak guna..
Kat sini dil ada sediakan 3 contoh tab menu yang boleh korang ambil dan guna.. *kalau nak la..^^
Korang boleh copy then, tulisla sendiri tab menu apa yang korang nak..contohnya, About Me.
Untuk tulis tu, korang boleh guna paint ke..photoshop ke..
Ni dil bagi design tab jer








Step 2

Buka Dashboard > Design > Page Elament > Add Gadget > HTML/Java Script
Copy kan code dibawah ni, dan letak dalam HTML/Java Script


<a href= " URL Pages anda " target = " _blank"><img src=" URL Tab Menu " width="155" height = "80" /></a>



Tips: 

  • Korang nak letak 3 tab menu. So korang copy jer code kat atas ni sebanyak 3 kali dan ubah URL Pages anda dan URL Tab Menu 
  • Korang boleh ubah saiz tab menu dekat width dan height ikut kesesuaian tab menu korang 
  • Sila letak code <center> dihadapan code korang yang first, dan letak </center> di code yang paling akhir untuk memastikan tab menu korang berada ditengah-tengah..



Nota kaki:

Kalau ada masalah, korang tanya jer ok..^^


Written by at
Labels: ,

81 comments:

  1. semutsengalJuly 1, 2011 at 4:40 PM

    mcm tautau je kan..


    thxs kak dil ;)

    ReplyDelete
  2. TUNASYAJuly 1, 2011 at 4:41 PM

    yey!!
    tutorial pasal menu tab...
    thanx akak...
    saya nak try lah... =)

    ReplyDelete
  3. Jasmin IbrahimJuly 1, 2011 at 5:16 PM

    errr apasal cam pelik jer sy buat??? huhu....
    *nak ambik mn ek yg URL Pages anda tu???? then,nape nmpk pelik??? huhu...tak jadi....xnk buat dh la.... :(....hehe

    ReplyDelete
  4. HuRuL AiNiJuly 1, 2011 at 6:29 PM

    kak dil .. Hurul ade satu pertanyaan .. macam mana nak wat url pages tu .. mcm hurul hurul nak wat about me , Resipi dgn Gambar so mcm mane yerk ?

    ReplyDelete
  5. HuRuL AiNiJuly 1, 2011 at 6:45 PM

    kak dil kak dil .. mcm mana nak letak tulisan kat menu tab tu .. ? Macam akak punya ade tulis tutorial doodles dan segalanya ~

    ReplyDelete
  6. Indah MulyaJuly 1, 2011 at 7:46 PM

    kira kena wat pages dlu br leh wat tab ni ke ha dill? mmg aritu tercr2 gak tutorial utk wat tab ni..blog rs semak je =.=

    ReplyDelete
  7. ogawaaaaaJuly 2, 2011 at 4:12 PM

    mcamna buat url pages tuh?

    ReplyDelete
  8. cikdilJuly 2, 2011 at 4:30 PM

    awk kena create pages dulu..tgk dekat tips..dil ada bg link, cara nak buat pages

    ReplyDelete
  9. -July 2, 2011 at 4:58 PM

    DIL !!
    berjaya :D
    thx a lot!
    siap curi design tab,..heeeee

    ReplyDelete
  10. hafiz masran(kisah hidup ku)July 4, 2011 at 9:13 PM

    saye dah boleh buat..tapi gambar je ade yang tulisan dalam gambar tu nak wat macam mane

    ReplyDelete
  11. raihan angJuly 6, 2011 at 1:02 PM

    Salam n hi there. thanx sgt sb ajar byk giler tutorial. hihi. skg ni pn tgh godek2 belog ni. siap buh link belog krn mnsnya epal utk promote kwn2 len cantekkan dorg pnye blog. :)

    ReplyDelete
  12. khansyaa' al khairiyah mohd ujangJuly 7, 2011 at 2:42 PM

    waaa yg ni lagi senang ! hehe. will try soon :)

    ReplyDelete
  13. Wanieys HashimJuly 12, 2011 at 2:07 PM

    cik dil thanx a lot da berjaya buat menu tab comel ny tapi tak tahu camna nak buat entry banyak-banyak.contoh camni la menu tab tab pasal tuto bila klik kat tuto akan kluar banyak-banyak tajuk.cam na nak create tu

    ReplyDelete
  14. ninie_azrienaJuly 20, 2011 at 3:51 PM

    ninie nak minta tab comel tu ye..tanks cik dil :)

    ReplyDelete
  15. ✿July 26, 2011 at 6:26 PM

    thanks sangat sebab bagi tutorial ni.cik tempe amek jugak cute tab yg cik dil wat tu :) thanks

    ReplyDelete
  16. Aqmal Aqil AsriJuly 26, 2011 at 10:02 PM

    great! dpt jgk bwt tab menu sndiri . thanks :)

    ReplyDelete
  17. iameunicegmAugust 1, 2011 at 11:06 PM

    jadi! hehe..
    thanks alot yea for this tutorial..gee..

    emm, took the tab yea? thanks again! ^^

    ReplyDelete
  18. Yaya TashaAugust 7, 2011 at 8:33 AM

    thanx yaw ! suke =]
    yaya amek 1 =D

    ReplyDelete
  19. AnonymousAugust 13, 2011 at 1:24 PM

    mmm.. mna nak dptkan url tab menu??

    ReplyDelete
  20. DfyStrawberyAugust 14, 2011 at 2:48 AM

    dah lame cari tutorial ni, tapi jadi tak jadi je if buad nanti, hehehe, tapi u punye tab menu simple tapi cute :)

    ReplyDelete
  21. AnonymousAugust 17, 2011 at 10:50 PM

    dil..asal x jadik..?? da berpuluh kali buat ta jadik2..huhuhu.. tensen da ni.. dye ade(width..smpaila kat....../a>) kat hujung tab.. lagi 1, tab tu, bukan mhala ke kiri tp, dye ke bawah..mcm mane ekk..??adooiii..!!

    ReplyDelete
  22. cikdilAugust 17, 2011 at 10:52 PM

    cuba check betul2..takut salah paste coding tu..yg turun kebwh tu, sbb saiz dia dh x muat untuk tempat yang awak nk letak tu..cuba ubah size dekat width tu

    ReplyDelete
  23. inibeloqkaybeeAugust 20, 2011 at 8:42 PM

    kak dil.. Da carik dah url tab menu dari mana dapat?

    ReplyDelete
  24. fly into my heartAugust 22, 2011 at 5:22 PM

    tak faham ! :( tolong lah , URL tab menu tu nak letak URL mane ?

    ReplyDelete
  25. fly into my heartAugust 22, 2011 at 5:40 PM

    TOLONG ! TAK JADI PUN HUKHUK :'(

    ReplyDelete
  26. unknownnameAugust 28, 2011 at 9:17 AM

    tq (:

    ReplyDelete
  27. unknownnameAugust 28, 2011 at 9:18 AM

    tapi akak.. lerh tak sye edit sikit akak nyew contoh tab tuh.. arap2 akak izin kn k (: but .. jgn isau.adeq still akn credit to u (:

    ReplyDelete
  28. NADIA RAJAMISeptember 16, 2011 at 10:55 PM

    thnx!!..:P

    ReplyDelete
  29. puteh32November 12, 2011 at 7:04 PM

    puteh tangkap tab menu yg kiut nie yerk..hihi..TQ

    ReplyDelete
  30. FifiNovember 21, 2011 at 4:46 PM

    saya dah buat, tapi dia ke bawah tak macam kak dil punye punn. dn menu tab yg biasa still ada lagi. mcm mna nak buang menu tab yg biasa tu.

    ReplyDelete
  31. RynNovember 25, 2011 at 11:21 AM

    thanx ! ;) saya amek satu design tab . . . . ;)

    ReplyDelete
  32. Rien RoseDecember 1, 2011 at 2:39 PM

    jadi2! maceh ek!!!! syunk cik blog.. hehehe

    ReplyDelete
  33. MARINA MUSADecember 14, 2011 at 1:04 AM

    thank cik dil dah jadi marina ambil satu taw

    ReplyDelete
  34. ShafiqahDecember 20, 2011 at 10:32 PM

    x jd pon :(

    ReplyDelete
  35. liyanazahirahDecember 26, 2011 at 9:55 PM

    thanks sgt2...kalo ade mase, ajar la cmne nk buad nie..saye baru blaja gne photoshop :)
    anyway cantik sgt..saye ambk 1 ea..

    ReplyDelete
  36. ArypDecember 29, 2011 at 10:02 PM

    kak dil,aryp dh cube buat jdik tpi cmne nak buat post kt page yng arytp buat tuh.contoh: aryp buat 3 tab menu HOME TIP OWNER .cmne klo aryp nak buat post untok tab yng tip tuh?,,please

    ReplyDelete
  37. nOor sYamiLa mOhDJanuary 19, 2012 at 1:14 PM

    tenz kak dil.. :) .

    ReplyDelete
  38. ❁❁❁❁❁❁❁❁January 23, 2012 at 11:00 AM

    cik dil , eza mntak maaf ya .. eza nak ambil semua tab menu kat atas tu untuk dibuatkan freebies .. nak mintak izin dulu dgn tuan empunya .. mintak maaf sesangat ya .. eza CREDIT atas nama cik dil , eza just nak tulis kat dalam tu dan share aje .. tq ~

    ReplyDelete
  39. Mazniza HazwaniApril 1, 2012 at 10:32 PM

    lepas tu kalau kata dah tulis dkt dlm dia home ape semua tu nak masukkan dlm blog mcm mane?

    ReplyDelete
  40. Mazniza HazwaniApril 1, 2012 at 10:48 PM

    TERIMA KASIH.saya ambik ye

    ReplyDelete
  41. cikdilApril 2, 2012 at 1:24 AM

    URL TAB MENU TU ADALAH URL PAGES KITA..CONTOHNYA, KORANG ADA BUAT TAB ABOUT ME..SO, MASA NGAH DISPLAY PAGE ABOUT ME TU, KAN ADA URL DIA KAN ATAS..YG TU LA URL PAGES..KALAU STILL TAK FAHAM, BOLEH TNYA LAHIK OK..^^

    ReplyDelete
  42. AzielahRahimMay 9, 2012 at 10:23 PM

    Hye,akak!Sya amik yng ke-3 tu yer!

    ReplyDelete
  43. Harry_MyrrahMay 29, 2012 at 4:56 PM

    thnx kak dil..
    mula2 tu pening ckit coz mcm x lngkap laa kak dil trangkn.. tp last2 lps renung2 bru phm.. saya amek satu design tab tau.. thnx!!

    ReplyDelete
  44. i-scarfJune 9, 2012 at 2:16 AM

    salam.cik dil apa beza url pages anda dgn url tab menu...buat tak jadila

    ReplyDelete
  45. UnknownJune 14, 2012 at 12:35 AM

    thanks

    ReplyDelete
  46. UnknownJuly 13, 2012 at 9:15 PM

    tenkiuu :)

    ReplyDelete
  47. Leya EleyaJuly 14, 2012 at 12:34 PM

    Akak..URL TAB tu yang mana..saya pun dah pening..TOLONG!!

    ReplyDelete
  48. UnknownJuly 15, 2012 at 2:30 PM

    thanks sesangat!!! dah menjadi!!!!!!!!

    ReplyDelete
  49. Cik in @ Ummu SajidahAugust 6, 2012 at 12:32 AM

    Alolo...cutenye....tq sgt2...suke dgn blog saye..hehe

    ReplyDelete
  50. UnknownOctober 22, 2012 at 2:50 PM

    KAK.. SAYA UCAP TERIMA KASIH TAPI SAYA X BERAPA PANDAI NAK BUAT TU.. TOLONGLAH BALAS KOMEN SAYA NI..SAYA BETUL2 NAK BAGI BLOG SAYA NAMPAK CANTIK.. TANKS..

    ReplyDelete
  51. kikiNovember 10, 2012 at 11:31 AM

    tebaek puye tutor,,
    mekaseh,,,nak try la

    ReplyDelete
  52. Aril ImpianNovember 11, 2012 at 2:14 AM

    great info...sangat membantu....!!!


    http://arilimpian.blogspot.com/

    ReplyDelete
  53. UnknownNovember 22, 2012 at 2:53 PM

    salam kak dil . nak tanyer , URL PAGE dgn URL TAB nak amek kat mana?? Komfius sudaa

    ReplyDelete
  54. UnknownNovember 23, 2012 at 2:50 AM

    salam kak dil nak tanye page element tu bukak kat mane? wat smua x menjadi nie
















    ReplyDelete
  55. TERATAK IMPIAN TRADINGNovember 25, 2012 at 4:26 PM

    salam..thanks ..dah berjaya buat tab yg comel..meh la singgah jenguk blog saya n komen..saya blogger baru http://cikleley.blogspot.com/

    ReplyDelete
  56. syazazuhairiDecember 2, 2012 at 2:59 PM

    This comment has been removed by the author.

    ReplyDelete
  57. CentiyahDecember 16, 2012 at 1:52 PM

    Kak dil, saye nak tanya. please please please jawab. saye bingung la. cam mane nak masokkan gambar tab menu yang sudah diedit ke html/java script nyee? tu ndak dalam bentuk url laa. cam mane? kalo masokan gambar tab menu yang akak kasih tanpa ade tulisannye lah gampang ajee. tolong jawab kak

    ReplyDelete
  58. kid tourqoiseDecember 25, 2012 at 1:10 PM

    thankss akak...saya amik satu ye..

    ReplyDelete
  59. UnknownDecember 27, 2012 at 12:27 AM

    sy amek 1 ye :)

    ReplyDelete
  60. UnknownFebruary 3, 2013 at 2:38 PM

    terima kasih,,saya amek menu tab yang ada reben satu tu,,

    ReplyDelete
  61. Hara DreamFebruary 10, 2013 at 7:23 PM

    tenks for giving me the tutor...time kasih kak!

    ReplyDelete
  62. UnknownFebruary 27, 2013 at 10:34 AM

    SALAM....NAK TANYE LEH X?

    ReplyDelete
  63. Ehh_AdikkMarch 16, 2013 at 5:20 PM

    alo...sy x bape paham tapi nak sangat blog yang kiut miut cam blog akak niyh :)

    ReplyDelete
  64. UnknownMarch 20, 2013 at 1:09 PM

    tak jadi lah saya buat

    ReplyDelete
  65. muhamad syamsul bin zainolApril 15, 2013 at 6:07 PM

    cantinya blog dia

    ReplyDelete
  66. me.ronazil.abApril 19, 2013 at 4:02 AM

    waduh waduh.....pening pale makcik.....wat r lecturer aku x ajok benda ni..... grrrrrrr

    ReplyDelete
  67. mellyApril 19, 2013 at 12:38 PM

    kak , nak paste kat tiele ke content ? dh try buat tapi tak jd .

    ReplyDelete
  68. EKRApril 27, 2013 at 4:38 PM

    Kak, mcm mana nak dptkan url menu tab yg dah di edit ek?

    ReplyDelete
  69. EKRApril 27, 2013 at 4:46 PM

    Btw kak, knp x dpt nak ambik menu tab tu? X dpt pun nak right click :(

    ReplyDelete
  70. UnknownApril 28, 2013 at 4:45 PM

    aien ambik ye..

    ReplyDelete
  71. UnknownMay 27, 2013 at 9:21 PM

    Wahhh jadi lahh ! Thanks awok :) saya ambil satu tab menu ok :D
    thanks for da tuto do follow me ok . nice blog :D

    ReplyDelete
  72. UnknownJune 5, 2013 at 10:48 PM

    tab menu dengan page 2 benda yang sama ke?

    ReplyDelete
  73. AnonymousJune 16, 2013 at 3:55 AM

    url tab menu tu yg mane eh ? da serabut nak buat background for blog ni -.-"

    ReplyDelete
  74. SauceskeJuly 11, 2013 at 3:09 PM

    kak dil bgilah skali url icon comey tu.. areen tw nak cari at mana...

    ReplyDelete
  75. UnknownSeptember 5, 2013 at 4:27 PM

    salam .anis amik yg ada cupcake tu tau :D thanks sis

    ReplyDelete
  76. UnknownDecember 18, 2013 at 2:40 PM

    Mcm mne nk dptkn url dlm laptop yg saye dh edit?

    ReplyDelete
  77. UnknownMarch 7, 2014 at 9:59 PM

    salam sis, sy xphm la..

    ReplyDelete
  78. AreynaMarch 17, 2014 at 11:25 AM

    nape nk copy xboleh... huhuhuhhu

    ReplyDelete
  79. Zahrah ZuhariApril 23, 2014 at 1:27 AM

    sy ambil satu ya. terima kasih :)

    ReplyDelete
  80. niena ismailAugust 19, 2014 at 6:20 PM

    syukran kak..mnjd la tuto ni..sng sgt..

    ReplyDelete
  81. UnknownApril 18, 2015 at 9:23 PM

    sy dah buat.. mmg jd tp space antara menu bar terlalu jauh. mcm mane nk rapatkan supaya space dia x terlalu jauh? tlg ajar...

    ReplyDelete