Mempercantik Menu Blog Dengan CSS Hover

Posting kali ini adalah jawaban dari request posting salah satu kawan ibllezboy eang bertanya di fb ibllezboy, "Bisa bantu gk cara ganti submenuna Template z33s Black Magazine, buat yang kaya submenunya http://ibllezboy.blogspot.com ntuh ..yang ada bordernya , dari kmren gk ketemu".
simak terus posting ini sampai selesai bro :)

Terus terang saya lebih suka mendayagunakan CSS dan CSS3 untuk mengoptimalkan desain blog :) karena tidak terlalu berat saat loading,dan CSS menurut saya lebih simple ;)

CSS apa sih bro ?? Nah bagi anda yang belum mengerti apa itu CSS , saya berikan penjelasan singkatnya :)
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Ok, Langsung ke materi kita :) bawaan menu di Template z33s Black Magazine adalah seperti ini kan :

Nah jika anda ingin merubahnya menjadi seperti di template ibllezboy ini , anda perlu merubah CSSnya sedikit :)

Pertama-tama anda masuk dulu ke blogger untuk masuk ke blog anda :)
Silahkan masuk ke bagian Rancangan,

Masuk ke menu Edit HTML

Maka disana akan muncul sript-script blog anda :)
Cari kode berikut ini "/* - * MENU &SEARCH* - */"
Bagian #azismenu {
Silahkan ubah menjadi seperti ini :
#azismenu {
background:#232323;
float:left;
width:100%;
font-size:93%;
padding-bottom:6px;
border :1px solid #6f0;
-moz-border-radius: 2em;
}

Keterangan :
Background ► untuk merubah warna defauld nya.
Border ► untuk setting garis tepi pada submenu tersebut, meliputi tebal dan warna yang digunakan.
moz border ► untuk memberi efek bentuk border submenu tersebut.

Lalu silahkan mencari kode ini "#azismenu a:hover span {"
Ubah CSS nya menjadi seperti ini :
#azismenu a:hover span {
color:#232323;
text-shadow: 0 0 10px #fff;
border :1px solid #6f0;
background:#6f0 ;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
}

Keterangan :
Background ► untuk merubah warna background menu tersebut saat di dekati mouse.
Border ► untuk setting garis tepi pada submenu tersebut, meliputi tebal dan warna yang digunakan.
moz border ► untuk memberi efek bentuk border submenu tersebut.
Color ► Untuk merubah warna font saat di dekati mouse.
Text shadow ► untuk memberi efek bayangan di tulisan tersebut , sedikit memberikan efek 3D.

Nah, setelah itu anda save ;) silahkan lihat hasilnya.

Mudah sekali kan ?

Jika ada pertanyaan atau saran , silahkan tinggalkan komentar ^_^ terima kasih.

Catatan : Sebelum anda melakukan Editing Template , saya sarankan untuk back-up template terlebih dahulu :)

di copas dari http://www.ibllezboy.co.cc/2011/01/mempercantik-menu-blog-dengan-css-hover.html http://ibllezboy.blogspot.com