Ocre, masih sama dengan Tutorial Sebelumnya, kali ini saya hanya ingin mengganti warna Gradient untuk Hovernya menjadi Hijau, yang adalah warna kesukaan saya wkwkwk... karena gak semua orang suka sama Warna Ungu juga kan hehe... Jadi, untuk CSS3 Button Menu ini, saya akan membuatnya menjadi 4 Warna yang bisa dipilih, dan di tutorial ke-2 ini kita akan membuatnya dengan Warna Ungu.
Bentuknya dapat anda lihat pada gambar diatas, atau anda bisa melihat Demonya secara langsung dengan meng-klik link demo dibawah ini:
Lantas bagaimana cara membuatnya?
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:
]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:#menucss3 {
float:left;
}
ul#secondmenu li {
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:0.8em;
padding-top:40px;
}
ul#secondmenu a
{
padding:8px 8px 8px 8px;
text-decoration:none;
font-weight:bold;
color:#b12ad4;
}
ul#secondmenu a.current {
background-color:#B0E137;
}
ul#secondmenu a:hover, ul#secondmenu a.current {
-moz-border-radius:0 20px 20px 20px;
background-image:url("http://i785.photobucket.com/albums/yy131/djnand/menu2.jpg");
color:#b12ad4;
}
6. Jika sudah, beralihlah dan cari Kode <body> dan letakkan Kode HTML dibawah ini tepat dibawah atau setelah kode <body> tersebut. Oiya anda juga bisa menaruhnya sebagai Widget jika mau, dan untuk itu, silahkan menuju ke Rancangan > Elemen Laman > Add gadget. Dan berikut Kode HTML-nya:<div id='menucss3'>
<ul id='secondmenu'>
<li><a href='#all' title=''>Home</a></li>
<li><a class='current' href='#' rel='graphicdesign' title=''>Projects</a></li>
<li><a href='#' rel='prints' title=''>Services</a></li>
<li><a href='#' rel='pweb' title=''>About Us</a></li>
<li><a href='#' rel='experiments' title=''>Tutorials</a></li>
<li><a href='#' rel='photography' title=''>Contact Us</a></li>
</ul>
</div>
7. Jika sudah, Save Template anda dan Lihat hasilnya...
Selamat Mencoba...
Membuat Menu CSS3 Button 2
Posted by sunariyo on Wednesday, February 1, 2012
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Follow us on:
0 komentar:
Post a Comment