Setelah sebelumnya membuat CSS3 Button Menu 1 Dan CSS3 Button Menu 2, kali ini saya ingin menawarkan warna lainnya, yaitu Pink hhe... Hem.. mungkin ini lebih tepat digunakan untuk template-template bergaya Girly, tapi yang bukan Cewe juga silahkan sih klo mau menggunakan hhe... saya gak ng'larang koQ....
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#thirdmenu li {
display:inline;
font-family:Arial,Helvetica,sans-serif;
font-size:0.8em;
padding-top:40px;
}
ul#thirdmenu a
{
padding:8px 8px 8px 8px;
text-decoration:none;
font-weight:bold;
color:#E227B6;
}
ul#thirdmenu a.current {
background-color:#B0E137;
}
ul#thirdmenu a:hover, ul#thirdmenu a.current {
-moz-border-radius:0 20px 20px 20px;
background-image:url("http://i785.photobucket.com/albums/yy131/djnand/menu3.jpg");
color:white;
}
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='thirdmenu'>
<li><a href='#all' title=''>Home</a></li>
<li><a href='#' rel='graphicdesign' title=''>Projects</a></li>
<li><a class='current' 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 3
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