Ocre, kali ini saya mau kembali mengajak anda untuk bermain-main dengan CSS3. Atau lebih tepatnya, kali ini kita akan membuat sebuah Menu Navigasi menggunakan CSS3. Dan untuk Menu navigasi kita kali ini, saya beri nama "Purple CSS3 Button Menu". Kenapa saya namakan begitu? karena warna navigasi kita kali ini adalah ungu haha... dan penamaan Button saya pilih karena bentuknya memang menyerupai Button.
Oiya disini, saya sedikit menggunakan Gradient Image untuk hovernya karena setelah saya coba tanpa Image hasil akhirnya ternyata kurang sesuai dengan yang saya harapkan hhe... Tapi jangan takut, Image yang kita gunakan sebagai Hover disini bukanlah Image utuh, melainkan Hanya Gradient yang bentuknya disesuaikan dengan menggunakan Border Radius, dan space dari Image yang kita gunakan disinipun hanya 1 KB jadi saya jamin gak akan mempengaruhi beban Loading Blog anda.
Dan bentuk dari Purple CSS3 Button Menu yang akan kita buat kali ini, dapat anda lihat pada gambar diatas, atau silahkan Klik link demo dibawah ini jika anda ingin melihatnya langsung.
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#firstmenu li {
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:0.8em;
padding-top:40px;
}
ul#firstmenu a
{
padding:8px 8px 8px 8px;
text-decoration:none;
font-weight:bold;
color:#83129E;
}
ul#firstmenu a.current {
background-color:#DDDDDD;
}
ul#firstmenu a:hover, ul#firstmenu a.current {
-moz-border-radius:0 20px 20px 20px;
background-image:url("http://i785.photobucket.com/albums/yy131/djnand/menu.jpg");
color:#FFFFFF;
}
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='firstmenu'>
<li><a class='current' href='#all' title=''>Home</a></li>
<li><a 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 CSS3 Button Menu 1
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