Wednesday, September 3, 2008

Merubah Text Menu di Navigation Bar (Menu)

Sebuah trik kuno dan tradisionil untuk merubah menu-text di Navigation Bar (Home, Blog, Photos, Video, Music dst.)

Tingkatan : Advance
Kesulitan : Sedang

Ada sebuah Notes berupa pertanyaan, bagaimana cara mengganti Text menu di Navigation Bar ( http://trickmp.multiply.com/notes/item/78/ )

Penjelasan dan caranya adalah sbb :

1. Tambahkan kode berikut ini pada akhir Custom CSS Anda. Ini dimaksudkan guna men-disable default menu.

#subnav { display:none; }

2. copy sub/section code subnavc dan subnav di Custom CSS Anda dan paste-kan ke akhir baris kode CSS, kemudian ganti nama sub-code tersebut masing-masing dengan pmenuc dan pmenu (jika Anda tidak menemukan section ini di Custom CSS code Anda, ada kemungkinan kode tsb berada di base theme CSS dari theme yang ada sekarang ini).

Contoh :

div#pmenuc {
width: auto;
}
div#pmenu {
padding: 1px 0 0 20px;
border: none;
background: none;
height: auto;
}

3. Tambahkan kode berikut ini ke Page-Title Anda (Anda dapat melakukan ini dengan meng-klik Customize My Site link kemudian pilih Edit Page-Title, atau klik ini ) :

<div id='pmenuc'><div id='pmenu'><div class='topt'><a class='topt' href='/'>Home</a><a class='topt' href='/journal'>Blog</a><a class='topt' href='/photos'>Photos</a><a class='topt' href='/video'>Video</a><a class='topt' href='/music'>Music</a><a class='topt' href='/calendar'>Calendar</a><a class='topt' href='/reviews'>Reviews</a><a class='topt' href='/links'>Links</a></div><br clear='left'><div style='height: 0px;'><!-- --></div></div></div>

Perhatian : pastikan semua kode anda buat dalam satu baris dan tidak ada cariage-return / baris baru.

Sekarang Anda tinggal mengganti teks yang berwarna merah dengan teks pilihan Anda. Seperti Home jadi Halaman-depan, Video jadi Pidio, Music jadi Lagu dst.

Mudah bukan ... ?
Tidak sesulit yang Anda bayangkan !

Selamat mencoba dan
Enjoy.

57 comments:

  1. enjoy dude....
    tfs

    **tugas pertama ya brow**

    ReplyDelete
  2. yang pertama http://trickmp.multiply.com/journal/item/76 sukarela ... yang ini dorongan kewajiban hehehehe ...
    wah ... kodenya kok jadi berantakan ya (jastifikasinya ... ?) kurang cocok buat nuliskan kode.
    bentar2 ... edit dulu.

    ReplyDelete
  3. sdh tau :D

    btw tfs aja

    ada yg mau cara hilangin ads?

    ReplyDelete
  4. ntar di tabok kang mulkiply...
    biarin ajah lah but kl mo sharing gpp brow....

    ReplyDelete
  5. sssttttt pura pura ajah gak tahu proet...

    ReplyDelete
  6. yups gpp share ko' :D
    zzzzz jgn bilang² ama om MP
    jiakakakakak

    ReplyDelete
  7. iya kalo gak ada yang jahil ngadu...

    ReplyDelete
  8. rencananya begitu, tapi di-set left justify aja ternyata dah cukup.

    ReplyDelete
  9. (jika Anda tidak menemukan section ini di Custom CSS code Anda, ada kemungkinan kode tsb berada di base theme CSS dari theme yang ada sekarang ini). >> kalo mo liat base theme css yg gw pake dimana??

    ReplyDelete

  10. linux3r.multiply.com
    widhacute.multiply.com

    ReplyDelete
  11. Contoh hasilnya seperti apakah ini? Blh di-share?

    ReplyDelete
  12. aku mau kasih code ini buat temen ..

    tapi waktu di tulis di PM dia gak mau muncul ( code untuk di Edit Page Tittle ) sementara code
    yang di CSS ------------ > ( #subnav { display ...... ini bisa muncul

    gimana nulisnya biar bisa muncul di PM ..
    tfs..

    ReplyDelete
  13. kode yang telah diaplikasikan dan berjalan baik, bisa dilihat di :rienjudea

    ReplyDelete
  14. ganti semua character < dengan &lt; dan character > dengan &gt;

    ReplyDelete
  15. thanks infonya. tapi, gimana caranya ngubah font-nya?

    ReplyDelete
  16. tambahkan di ID pmenuc font-family:[daftar font Anda];
    jika mengacu pada contoh di atas :

    div#pmenuc {
    width: auto;
    }

    akan menjadi (jika diinginkan font=Arial, Times New Roman maka :

    div#pmenuc {
    width: auto;
    font-family: Arial, "Times New Roman";
    }

    ReplyDelete
  17. om punya ku sudah berhasil tapi mau mengganti warna nya kok nggak berhasil
    css nya
    /*GANTI TEXT HOME.BLOG DLL*/
    #subnav { display:none;
    }
    /*FRONT WARNA DI HOME,BLOG DLL*/
    div#pmenuc {
    font-family: Comic Sans MS;
    font-size: 20px;
    font-color: #660066;
    width: auto;
    }
    div#pmenu {
    padding: 1px 0 0 20px;
    border: none;
    background: none;
    height: auto;
    }

    sama kalao masuk page lain nya kok nggak kelihatan atau ada, sama dengan warna background nya ..
    contoh link nya : http://bigbirds212.multiply.com/journal/item/36
    kalau page depan semua keliatan ..
    makasih atas bimbingan nya

    ReplyDelete
  18. Pastikan kode berikut ini masuk ke "Page Title" bukan di "Welcome box title" agar menu ngikut ke page-page berikutnya, tidak di home-page saja.

    <div id='pmenuc'><div id='pmenu'><div class='topt'><a class='topt' href='/'>Home</a><a class='topt' href='/journal'>Blog</a><a class='topt' href='/photos'>Photos</a><a class='topt' href='/video'>Video</a><a class='topt' href='/music'>Music</a><a class='topt' href='/calendar'>Calendar</a><a class='topt' href='/reviews'>Reviews</a><a class='topt' href='/links'>Links</a></div><br clear='left'><div style='height: 0px;'><!-- --></div></div></div>

    ReplyDelete
  19. o0o kamsud saya sudah salah tempat gitu ya ....!
    tak ganti nya bentar

    ReplyDelete
  20. hahahaah berhasil berhasil
    suwun suwun .......!

    ReplyDelete
  21. berhubung penempatan sudah berhasil ( selamat ! ), berikut yang perlu disesuaikan agar navigation menu berubah warna :
    saya cuplik dari CSS anda.

    a.topt, a:visited.topt {
    line-height: 1.2em;
    display: block;
    float: left;
    height: auto;
    text-align: center;
    background: none;
    font-size: 10px;
    font-weight: italic;
    color: #CFDEF3;
    width: auto;
    padding: 2px;
    margin-left: 5px;
    margin-right: 5px;
    text-transform: uppercase;
    }

    ReplyDelete
  22. alhamdullilah sudah berhasil .....!
    sengkiu sengkiu
    met beraktifitsas om
    "HAPPY VALENTINE DAY"

    ReplyDelete
  23. ass mau nanya nich gmn caranya ganti background foto kan aq upload trus fotox ada background putih gmn cara gantinya... thank'z

    ReplyDelete
  24. foto yang di mana ?
    mohon diperjelas pertanyaannya dan diberikan alamat link dari foto tersebut, saya tidak bisa memberikan penjelasan hanya dengan menduga-duga saja.
    makasih.

    ReplyDelete
  25. bagaimana supaya menu link yang kita buat sendiri itu tidak menumpuk seperti di home page saya ?

    ReplyDelete
  26. Sebaiknya anda berikan screenshot-nya.
    Saya lihat site anda baik-baik saja.
    Problem ada di sebelah mana ?

    ReplyDelete
  27. sekarang sudah saya custom tetapi hanya 1 menu mas .klo saya buat 2 menu jadinya menumpuk .
    terimakasih sebelumnya pada mas lilok .

    ReplyDelete
  28. klo jadi gambar gimana tooh??
    Bisa kagakk??

    ReplyDelete
  29. waduh, masih bingung, nih!
    kode yang ditaruh di Page Title itu, lho..
    ditaruh mana?
    saya masih belum paham!

    ReplyDelete
  30. Login dengan ID anda, klik Customize My Site -> Edit title
    atau di saat anda berada pada page anda, copy kode berikut ini dan paste ke adress-bar browser anda,

    javascript:create_and_show_title_form();

    ReplyDelete
  31. yup, terima kasih banyak...
    tapi, kenapa di browser nama site saya jadi panjang banget, ya?
    ada menu saya di situ...
    diapakan, kah?

    ReplyDelete
  32. Memang demikian resikonya.
    Apapun text yang anda masukkan lepat page title, akan dianggap sebagai judul halaman / page title.

    ReplyDelete
  33. yep, terima kasih banyak...^^
    maaf merepotkan...

    ReplyDelete
  34. Slmt Siang Mas..
    untuk kode yg ini .. apabila tulisan home.. Blog.. photo.. dll mau diganti dengan tombol navigator yg bisa berubah waktu tersentuh mouse .. gimana ya..
    mohon pencerahannya... terima kasih sebelumnya

    ReplyDelete
  35. Ada yang nanya merubah warna text-nya ... oke, akan saya cobakan dulu kodenya.
    Sabar yaa ...

    ReplyDelete
  36. setelah aku ganti ....... lah dalah hurufnya kok kecil imut kaya' gak jelas lagi kalo di baca. cariin huruf yang gede ya Om

    ReplyDelete