Blogger Tutorial: Colourful Navigation Header

Salam & Hello.

Ada orang tanya macam mana saya buat nav header/bar/tab warna-warni macam kat blog saya ni. Macam ni la, saya buat tutorial macam mana nak buat colourful nav tu yea.


1. Login Bashboard > Design > Page Elements > Add a Gadget > HTML/JavaScript.

2. Copy code di bawah ini dan paste di kotak HTML/JavaScript.

<div style="text-align: center;"><span style='-moz-border-radius: 5px; background-color:#ff6666; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#ff6699; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#996699; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#33cccc; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span> <span style='-moz-border-radius: 5px; background-color:#99cc00; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINk</a></span> <span style='-moz-border-radius: 5px; background-color:#ff9933; padding: 10px 30px 10px 30px;'><a href="http://YOUR_LINK_HERE.com">LINK</a></span><br /><br /></div>

3. Edit bahagian yang diperlukan:
tulisan biru - tukar dengan link yang anda ingini contohnya HOME, ABOUT dan lain-lain.
tulisan merah - tukarkan perkataan link dengan yang anda ingini.
tulisan pink - untuk radius (bulatan). tukarkan no yang lebih besar contohnya 10px untuk radius yang lebih melengkung.
tulisann hijau - untuk mengubah warna background asal dengan warna yang anda sukai. tukarkan tulisan hijau bold dengan code warna yang di ingini.
tulisan ungu - saiz padding (kelebaran dan ketinggian) boleh diubah dengan menukar no px.

4. Save tanpa meletakkan title. save without any title.

psst: kalau tak jadi atau tak faham ke, sila tanya saya di kotak komen yang disediakan. terima kasih. :)

21 comments:

  1. alhamdulillah , nsib bek ade yg lain utk tab menu . hehe , yg ni bru jd ! maseh kak zira for tutorial nih ^^

    ReplyDelete
  2. @afiqah amirah mohd azilan - tak jd mcm mne? org lain ada yg buat jd je. mgkin awk ada slh buat kot. huhuu~

    ReplyDelete
  3. Hazirah,,
    saya tak faham yg tulisan biru tu,, tukar dgn link sendiri?? link maner,,??
    tulisan merah?? link yg diingini?? maksud??
    sorry banyak tanya tp saya mmg tak faham,,

    ReplyDelete
  4. @Princess Mieril - mcm ni tulisan wrna biru tu tukar dgn link yg awak nak pergi contohnya; http://hahazirah.blogspot.com.
    tulisan wrna merah tu pulak nama link awk td contohnya; Hahazirah.

    Cuba awk try dulu contoh sy ni. Kalo awk dah dpt dn faham awk tukar la dgn link awk sndiri. Hrp sy dpt mbantu dan mntk maaf sbb lmbat bls. kinda busy. hehe~ ^^

    ReplyDelete
  5. i dah buat memg menjadi tp ade mslh..cmne i nk remove yg i dah buat??bile i remove otomatik link i hilang?bile i buat tab menu cm u buat die xdpt search link i..cmne ea u?sory if soklan i nie cm serabot sket..:p

    ReplyDelete
  6. @Farah Eyda @ Rara Emiliockii - haah, mmg sy agk konpius skit ape mslh sebenarnya. kalo awk nk remove, remove la mcm bese. delete sume code tu. then try la buat navi yg ade drop down list ni, sy ade wat tuto dia jgk, cri la. hehee~

    ReplyDelete
  7. zirah, mintak izin copy tuto ni ye :) i will credit you, hee~

    ReplyDelete
  8. @Dieyna oh ok, boleh je. sharing is caring. aww~ :)

    ReplyDelete
  9. mcm mana nk asingkan link tue?
    mksudnye,klw mcm zira pye, kite klik tutorial kuar yg tutorial je...
    *blur*
    huhu~

    ReplyDelete
  10. @eli_faimi ooo..yg tu awk kena tag/label kan dlu entri awk tu pstu nti akn kluar la smua tuto tu. awk ltk link yg label tuto td..

    ReplyDelete
  11. akak,border melengkung mcam akak pnye cm mnerh eh ? tolong ajarkn.

    ReplyDelete
  12. lagi 1 kak. die pnye tulisan nk tkar cm mnerh ?

    ReplyDelete
  13. @nurhuda dini kalao nak border melengkung bleh refer sini;

    http://hahazirah.blogspot.com/2010/11/rounded-border.html

    nak tukar tulisan boleh masukkan code font: Arial 12px; tu rasanya. awk try la dlu okie.

    ReplyDelete
  14. Kak Hazirah, sy guna these lovely navigation eh.... x)

    Thanks!

    ReplyDelete