0 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.

<style type="text/css">

#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;
}

</style>

<div id="coolmenu">
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Bisnis%20Online">Bisnis Online</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Desain%20Grafis">Desain Grafis</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Tutorial%20Flash%2008">Tutorial Flash 8</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Tutorial%20Blog">Tutorial Blogg</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Komputer%20Internet">Komputer Internet</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Tips-Trik">Tips N Trik</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Free%20Artikle">Free Artikle</a>
</div>

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.

Tweet

Komentar →