Saturday, December 4, 2010

Tutorial 19 : Membuat Tab Menu Cantik ( dekorasi sendiri )

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

59 comments:

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

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

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

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

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

    ReplyDelete
  6. @Jenny99

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

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

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

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

    ReplyDelete
  10. @Jenny99

    dragkan bahagian atas sekali iaitu bawah header

    ReplyDelete
  11. @Jenny99

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

    ReplyDelete
  12. @Nurfazila Suhaide

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

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

    ReplyDelete
  14. to all : thank so much muahhh

    gunalah photoshop atau photoscape

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

    ReplyDelete
  16. @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
  17. akak ! x reti laa nak guna photoscape ? ajar laa

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

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

    ReplyDelete
  20. Akk, configure HTML/Javascript tu ade kt mane?

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

    ReplyDelete
  22. Dah jadi ! InI lah yang ditunggu2 . thankss :)

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

    ReplyDelete
  24. 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
  25. tak faham la ...tlong la bagi link dia ..

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

    ReplyDelete
  27. 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
  28. senanggggnyer...thanks..puas mencari..hehhe

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

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

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

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

    ReplyDelete
  33. 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
  34. thanks for the awesome tutorial..deebak! =)

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

    ReplyDelete
  36. Miss Farah.
    Miss Farah Pakai Template Blog Yang Mana?

    ReplyDelete

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

Terima kasih lepak sini, nanti datang lagi yer..
Sayang Korang...





Related Posts Plugin for WordPress, Blogger...
 
Copyright © 2016 Blog Cik Nurfarah. All Rights Reserved. Designed by Blog Cik Nurfarah.