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..^^


81 comments:

  1. mcm tautau je kan..


    thxs kak dil ;)

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

    ReplyDelete
  3. 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. 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. kak dil kak dil .. mcm mana nak letak tulisan kat menu tab tu .. ? Macam akak punya ade tulis tutorial doodles dan segalanya ~

    ReplyDelete
  6. 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. awk kena create pages dulu..tgk dekat tips..dil ada bg link, cara nak buat pages

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

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

    ReplyDelete
  10. 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
  11. waaa yg ni lagi senang ! hehe. will try soon :)

    ReplyDelete
  12. 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
  13. ninie nak minta tab comel tu ye..tanks cik dil :)

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

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

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

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

    ReplyDelete
  17. thanx yaw ! suke =]
    yaya amek 1 =D

    ReplyDelete
  18. mmm.. mna nak dptkan url tab menu??

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

    ReplyDelete
  20. 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
  21. 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
  22. kak dil.. Da carik dah url tab menu dari mana dapat?

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

    ReplyDelete
  24. 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
  25. puteh tangkap tab menu yg kiut nie yerk..hihi..TQ

    ReplyDelete
  26. 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
  27. thanx ! ;) saya amek satu design tab . . . . ;)

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

    ReplyDelete
  29. thank cik dil dah jadi marina ambil satu taw

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

    ReplyDelete
  31. 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
  32. 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
  33. lepas tu kalau kata dah tulis dkt dlm dia home ape semua tu nak masukkan dlm blog mcm mane?

    ReplyDelete
  34. 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
  35. Hye,akak!Sya amik yng ke-3 tu yer!

    ReplyDelete
  36. 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
  37. salam.cik dil apa beza url pages anda dgn url tab menu...buat tak jadila

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

    ReplyDelete
  39. thanks sesangat!!! dah menjadi!!!!!!!!

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

    ReplyDelete
  41. 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
  42. tebaek puye tutor,,
    mekaseh,,,nak try la

    ReplyDelete
  43. great info...sangat membantu....!!!


    http://arilimpian.blogspot.com/

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

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
















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

    ReplyDelete
  47. This comment has been removed by the author.

    ReplyDelete
  48. 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
  49. terima kasih,,saya amek menu tab yang ada reben satu tu,,

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

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

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

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

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

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

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

    ReplyDelete
  57. tab menu dengan page 2 benda yang sama ke?

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

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

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

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

    ReplyDelete
  62. nape nk copy xboleh... huhuhuhhu

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

    ReplyDelete
  64. 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