Cara Membuat Yellow CSS3 Button Menu
Daftar Isi
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: Purple CSS3 Button Menu, Green CSS3 Button Menu Dan Pink CSS3 Button Menu.
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...
@ masgondrong : Versi Default Template blog ini yang belum saya apa-apakan bisa di download di Url Berikut:
http://dj-note.blogspot.com/2011/07/download-default-template-blog-ini.html