Rabu, 20 Juni 2012

Cara membuat menu navigasi di elemen baru

oke... come back lagi nih... :)

udh lama gk ngurusin blog...
emm... kali ini saya mau bagi info tentang cara membuat menu navigasi.
oke lah... dr pada ngomong panjang lebar, lngsung saja bgini caranya :
 


  1. Silahkan login ke bloger kalian :)
  2. setelah itu pergi ke dashboard >> tata letak
  3. setelah itu, kalian klik edit HTML, lalu cari kode ini ]]> (biar cepet pake CTRL+f).
  4. jika sudah ketemu kode tersebut, kalian letekan kode dibawah ini tepat diATAS kode tadi.
    #NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }

  5.  simpan template, kemudian klik tata letak >> tambah gadget baru >> HTML/javascript
  6. kemudian letakkan kode di bawah ini, 



 Jika kode sudah anda letakkan,lalu pilih Simpan,dan anda bisa langsung lihat hasilnya.

Untuk http:/// ,anda isi dengan alamat URL yang akan di tuju,sedagkan untuk Menu 1,2,3,4 ,Untuk tulisan yang akan tampil,sedangkan jika ingin menambahkan satu kolom lagi,anda tinggal menulis satu baris lagi,baris yang mana?

Copy aja salah satu kode :



  • Menu 4
  • ,dan paste persis di bawahn

    *selamat mencoba*


    0 komentar: