Advertise

Tampilkan postingan dengan label Vertical. Tampilkan semua postingan
Tampilkan postingan dengan label Vertical. Tampilkan semua postingan

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 :

<style type="text/css">

/* 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;
}
</style>


<!-- silahkan ganti dengan link milik anda -->

<div id="vertikal-merah">
<ul>
<a href="http://chugygogog.blogspot.com/search/label/Bisnis%20Online">Bisnis Online</a>
<a href="http://chugygogog.blogspot.com/search/label/Desain%20Grafis">Desain Grafis</a>
<a href="http://chugygogog.blogspot.com/search/label/Tutorial%20Flash%2008">Tutorial Flash 8</a>
<a href="http://chugygogog.blogspot.com/search/label/Tutorial%20Blog">Tutorial Blog</a>
<a href="http://chugygogog.blogspot.com/search/label/Komputer%20Internet">Komputer Internet</a>
<a href="http://chugygogog.blogspot.com/search/label/Tips-Trik">Tips N Trik</a>
<a href="http://chugygogog.blogspot.com/search/label/Free%20Artikle">Free Artikle</a>
<!-- untuk menambah link baru simpan di sini -->
</ul></div><p></p>

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.

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://chugygogog.blogspot.com/search/label/Bisnis%20Online">Bisnis Online</a>
<a href="http://chugygogog.blogspot.com/search/label/Desain%20Grafis">Desain Grafis</a>
<a href="http://chugygogog.blogspot.com/search/label/Tutorial%20Flash%2008">Tutorial Flash 8</a>
<a href="http://chugygogog.blogspot.com/search/label/Tutorial%20Blog">Tutorial Blogg</a>
<a href="http://chugygogog.blogspot.com/search/label/Komputer%20Internet">Komputer Internet</a>
<a href="http://chugygogog.blogspot.com/search/label/Tips-Trik">Tips N Trik</a>
<a href="http://chugygogog.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.