Nha, dan ini adalah warna Gradient terakhir yang ingin saya tawarkan kepada anda, yaitu Warna kuning, Itu kenapa saya namakan "Yellow CSS3 Button Menu" hhe... klo mau ng'liat warna sebelumnya silahkan pilih: Membuat CSS3 Button Menu 1, Membuat CSS3 Button Menu 2 Dan Membuat CSS3 Button Menu 3
Dan Bentuk dari Yellow CSS3 Button Menu ini 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#fourthmenu li {
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:0.8em;
padding-top:40px;
}
ul#fourthmenu a
{
padding:8px 8px 8px 8px;
text-decoration:none;
font-weight:bold;
color:black;
}
ul#fourthmenu a.current {
background-color:#B0E137;
}
ul#fourthmenu a:hover, ul#fourthmenu a.current {
-moz-border-radius:0 20px 20px 20px;
background-image:url("http://i785.photobucket.com/albums/yy131/djnand/menu4.jpg");
color:black;
}
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='fourthmenu'>
<li><a 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 class='current' 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 4
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