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. @pN.rOs


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

    ReplyDelete
  3. ahaaa...
    da cube..cntek!
    tq...

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

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

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

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

    ReplyDelete
  8. @Jenny99

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

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

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

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

    ReplyDelete
  12. @Jenny99

    dragkan bahagian atas sekali iaitu bawah header

    ReplyDelete
  13. @Jenny99

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

    ReplyDelete
  14. @Nurfazila Suhaide

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

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

    ReplyDelete
  16. to all : thank so much muahhh

    gunalah photoshop atau photoscape

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  29. 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
  30. senanggggnyer...thanks..puas mencari..hehhe

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

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

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

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

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

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

    ReplyDelete
  38. @Jenny99CODE HTML ambik kt mne?

    ReplyDelete
  39. 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 :)

Related Posts

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH