Modifikasi Vertical Menu Dengan Ronded Corner

Tutorial Kali ini saya akan membahas cara membuat Vertical Menu dengan Modifikasi menggunakan Ronded Corner, Mungkin Vertical Menu ini pernah saya bahas pada postingan sebelumnya bisa di lihat disini. Sebagai tambahan saja buat teman teman blogger yang ingin merubah atau mengganti link Menu Vertical dengan Ronded Corner silahkan ikuti caranya dibawah ini.

seperti biasa saya membuat menu ini tanpa harus membuka EDIT HTML template anda cukup dengan menambahkan Widget HTML/Java Sript di sidebar atau di bagian footer seperti menu vertical yang ada di blog ini. Langsung saja :

1. Masuk ke Blog anda.
2. Pilih Tata Letak di lanjutkan dengan memilih Element halaman.
3. Tambah Gadget – Lalu pilih HTML/JavaScript.
4. Masukan Kode HTML di bawah ini :

/* vertikal vertikal merah di mulai
—————————————- */

/*Credits: CSS Library */
/*URL: http://css-lybrary.blogspot.com */

#vertikal-merah{

border-bottom-width: 0;
}

#vertikal-merah ul{
margin: 0px;
padding:0px;
font: normal 100% ‘georgia; /*pemilihan bentuk huruf */
}

#vertikal-merah a{
display: block;
padding: 4px;
padding-left: 10px;
border:1px solid #ccc;
-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px;
text-decoration: none; /*agar link tidak bergaris bawah */
color: black;
border-top:1px solid #f3f3f3;
border-bottom:1px solid #f3f3f3;
border-right:1px solid #f3f3f3;
background-color: #fff;
border-left: 10px solid #ccc;
}

#vertikal-merah a:hover {
background-color: #f2f2f2;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:10px solid #ccc;
color: #cc0000;
}

Ganti Link nya dengan link yang ingin anda gunakan.
Berikan judul untuk widget ini misalnya Menu Vertical atau apa saja terserah anda.
Jika sudah Simpan.

Tentunya anda sudah paham untuk merubah warna background ataupun warna teks jika kode di atas tidak sesuai dengan keinginan anda silahkan anda menggantinya….!!
Selamat mencoba.

One thought on “Modifikasi Vertical Menu Dengan Ronded Corner

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