Menu Link Vertical Dengan Hover Backgroun

Menu vertical ini biasanya di gunakan atau di tempatkan pada bagian sidebar. Mungkin untuk menu link vertical ini biasanya tidak menggunakan background hanya menggunakan teks tanpa backround paling untuk hover menggunakan perubahan warna saja pada teks tanpa menggunakan background.
Disini saya coba membuat Menu Link Vertikal dengan menggunakan Hover background. Maksudnya yaitu ketika mouse menyentuh link tersebut maka background akan muncul atau berganti warna. Link hover seperti ini juga biasanya di gunakan untuk link Horizontal yang biasa di letakan di bagian atas blog atau di bawah header.

Kelebihan dari kode HTML di bawah ini bisa di pasang langsung pada widget template tanpa membuka edit HTML. Jadi kita bisa memodifikasi setiap Widget link yang ada di sidebar menjadi berbeda beda.

Langsung saja Ikuti caranya seperti di bawah ini :

  • Yang pertamaMasuk Ke Blogger
  • Pilih Tata Letak
  • Pilih Elemen Halaman dan Klik Tambah Gadget
  • Pilih HTML/JavaScript
  • Masukan Kode di bawah ini.

#coolmenu{
border: 0px solid black;
width: 100%;
background-color: #fff;
}

#coolmenu a{
font: bold 13px Verdana;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color: #f3f3f3;
color: black;
}

Ganti Link-nya dengan Link yang blogger inginkan. Anda juga bisa merubah warna background-color dan background untuk Hover dengan mengganti kode warna yang di inginkan.

Jika sudah klik save dan lihat hasilnya. Selamat mencoba.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s