Hasil seni dan reka bentuk adalah berbayar dan hakcipta Whitey Mommy.
Sila hubungi saya di whiteymommy@yahoo.com untuk sebarang pertanyaan dan tempahan.
Anda TIDAK DIBENARKAN SAMA SEKALI untuk mengambil/menyalin/menyimpan
mana-mana bahagian hasil seni dan reka bentuk yang telah saya hasilkan TANPA KEBENARAN!

Navigation Bar Cara Whitey Mommy


Ada sesiapa berminat nak buat navigation bar macam saya? hm... ni 1st tutorial... macam best je tengok blog yang ada tutorial... jadi saya pun nak buat jugak tak malu

Saya guna template yang betul2 kosong hanya ada side bar sahaja... jadi kena outer sendiri kalau nak ala2 canggih! ok jom mula

1. Login ke Blogspot .

2. Klik Layout - Edit HTML(Tick pada kotak: Expand Widget)
-Pastikan backup template anda dengan tekan Download Full Template...
Ini Penting ya!

3. Tekan CTRL+F untuk memudahkan anda mencari kod . Masukkan kod ]]></b:skin> kedalam kotak Find dan tekan Enter

4. Copy Kod yang berwarna Merah dibawah dan Pastekan diatas atau sebelum kod ]]></b:skin>
#nav {
font-size:13px;
height:40px;
background:#D2D2D2;
}
#nav ul{
list-style:none;
}
#nav li a {
color:#000;
display:block;
float:left;
padding:10px 0px 0px 30px;
}
#nav li a:hover {
text-decoration:underline;
}
*kod yang saya boldkan dengan warna biru itu.. boleh ditukar mengikut warna kesukaan anda...
kod warna boleh didapati disini...


5. Kemudian, Copy dan pastekan kod <div id='content-wrapper'> kedalam kotak Find. tekan Enter.

6. Copy kod yang berwarna purple dibawah ini dan pastekan diatas atau sebelum kod <div id='content-wrapper'>
<div id='nav'>
<ul>
<li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='masukkan link anda' title='nama link'>title</a></li>

<li><a href='masukkan link anda' title='nama link'>title</a></li>

<li><a href='masukkan link anda' title='nama link'>title</a></li>

</ul>
</div>
contohnya :<li><a href='http://whiteymommy2.blogspot.com' title='Exchange Link'>Exchange Link</a></li>

ok! anda boleh preview dan kalau tiada error boleh save... =)

Ini Bonus!

Jika anda berminat nak letak gambar atau tulisan macam saya tu pun boleh...

masukkan kod dibawah pada Title
<img border='0' src='url gambar anda'/>
Contohnya: <li><a href='masukkan link anda' title='nama link'><img border='0' src='url gambar anda'/></a></li>

*tulisan macam saya tu boleh reka sendiri dengan menggunakan perisian photoshop atau generate kat sini... kemudian uploadkan gambar tulisan di laman web photobucket untuk mendapatkan kod url gambar anda...

sebelum Save pastikan Preview dulu dan jika tiada error boleh save dengan jayanya...

Selamat Mencuba...

Whitey Note: Pastikan kod di Copy dan Paste dengan tepat untuk mendapat hasil yang memuaskan... berjaya atau tidak sila tinggalkan komen pada saya ya... sebab tutorial ini saya buat sendiri...

38 Comment (s):

  1. hah, ini yang dicari-cari..tapi masih tak reti la :'(

    ReplyDelete
  2. @Mommy Pinky
    tang mana yang tak reti... meh pasword aku tolong watkan nak?

    ReplyDelete
  3. ha..ah macam pening sikit aa..meh jalan kat umah tolong buatkan u aku sekali ha..ha..

    ReplyDelete
  4. berjaya...tapi nav bar tu kat tepi lah...

    ReplyDelete
  5. mule2 die mnjadik tau mommy..tp pastu xde pulak..

    ReplyDelete
  6. kak sya, yana buat dia ke tepi la kak.. huhuhu

    ReplyDelete
  7. ok.. malam sikit yana try.. la ni mama nak main game! haahhahaha

    ReplyDelete
  8. @liyana aziz
    Ikut kesesuaian.. tambah 10px dulu pastu preview tgk kesesuaian..kena try n error...:)

    ReplyDelete
  9. @Whitey Mommy
    dah siap! heheheheh.. tapi cane lak nak masuk kan banyak2 post bawah satu menubar..

    cth: appreciation bar, yana nak letak post2 tentang award dan tag, macam mana nak masukkan URL nya..

    btw, tq WM

    ReplyDelete
  10. @Whitey Mommy
    ok! done! cuma buat link kan? tadi tengok2 WM punya.. hehehhehe.. nway, tq so much.. dapat belajar banyak benda dari sini.. tq!

    ReplyDelete
  11. tak jadi pon..bila nak save dia keluar ni:
    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The element type "UL" must be terminated by the matching end-tag "".

    ReplyDelete
  12. @Aida Farzana Nana
    kemungkinan salah paste kod... hm... kena try and error ya... sebab saya memang sampai sekarang pun masih guna kod ni. tq

    ReplyDelete
  13. dah try tpi camne nak masukkan byk2 post dalam tu?
    eg; cerita-nak masuk post byk2 camne ea?

    ReplyDelete
  14. @Iman Minhah
    nav ni tak leh wat perkara macam tu... just link je...

    ReplyDelete
  15. @Iman Minhah
    untuk wat tutorial kena paham nak amik link kat mana... link biasanya ada kat bahagian atas blog... mana2 post/label bagi nak link kan pada tab2 yang dibuat. itu saje akk leh explain...then masukkan follow tutorial tu...

    ReplyDelete
  16. salam WM... dah buat link tpi knp x jdi?

    ReplyDelete
  17. x bole buat pon..
    error apa tah jd nya..
    cena nk wat ek..

    ReplyDelete
  18. momy.., buatkan utk saye plish...=)

    ReplyDelete
  19. nape template deqdeq xder kod yang ada 'content-wrapper'

    dah tu mcm mana nak buat yer...

    ReplyDelete
  20. to deqdeq: ini hanya untuk template minima. kalau guna template dari blogger designer memang tak boleh. as i mention

    ReplyDelete
  21. alamak..mcm mana plak tu ye...emmm...mksdnya template yg klasik ke?

    ReplyDelete
  22. tak la. template yang bukan darpada Blogger Template Designer

    ReplyDelete
  23. oooo...ok...nnt deqdeq cuba lagi ye...trima kasih

    ReplyDelete
  24. all design termasuk gambar kartun kat header tu u lukis sendiri ke?

    ReplyDelete
  25. @blasahje
    yes all design in this blog. then untuk kartun pada header saya bukan lukis sendiri itu by kak emila.

    ReplyDelete
    Replies
    1. hye sis..

      sy dah try buat tapi tak complete la sis..

      blh bantu saya tak?

      email me:addaryan313@gmail.com
      whatsup:01121143439 (Faster reply)

      Thank You..:)

      Delete
  26. Saya baru jd follower....nnt2 saya nak menelaah suma tutorial....

    ReplyDelete
  27. MOMMY , DAH BUAT , JADI DAH . TP TEKAN KT LINK TU , TAK JADI :(

    ReplyDelete
  28. ala...npe xdpt find yg coding mam bg 2 yerk?

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

    ReplyDelete
  30. jadi, tapikan, kenape yg first tu mcm ade problem sikit . anyway, thanks tau.

    ReplyDelete

Thank You For Leaving a Comment to Me...

 
Copyright © Whitey Mommy™