Transparant Chunky Pure CSS3 Menu
Kali ini pun kita masih akan bermain-main dengan Menu Navigasi Ala CSS3, Setelah sebelumnya saya mengajak anda membuat Simple CSS3 Horizontal menu, kali ini saya ingin mengajak anda membuat Transparant Chunky Pure CSS3 Menu. Kenapa saya namakan demikian? karena Menu ini memang saya buat Transparant dan Backgroundnya akan mengikuti Template anda masing-masing biarpun lebih tepat jika anda menggunakan Template Putih dalam hal ini.
Bentuknya dapat anda lihat pada gambar diatas. Atau lihat demo-nya KLIK DISINI, dan perhatikan Menu Transparant yang baru akan terlihat jika anda mengarahlan Kursor.
Lantas Bagaimana Cara Membuaatnya? Silahkan Ikuti Panduan berikut:
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:
#top_navigation {
background : transparent;
width: 800px;
height : 77px;
list-style : none;
margin-top : 7px;
margin-bottom : 11px;
width : 100%;
}
ul.nav {
background : transparent;
width: 800px;
height : 57px;
line-height : 31px;
list-style : none;
padding : 0 10px;
font-size : 14px;
}
ul.nav li {
display : inline;
padding : 0;
background : transparent;
}
ul.nav a {
background : transparent;
height : 30px;
font-size : 16px;
color : #808080;
float : left;
padding : 11px 19px 11px 16px;
text-decoration : none;
border-top: 1px solid #252525;
border-bottom : 4px solid #252525;
border-left : 1px solid transparent;
border-right : 1px solid transparent;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
ul.nav a:hover {
background : #252525;
border-top : 1px solid #252525;
border-bottom : 4px solid #000;
border-left : 1px solid #252525;
border-right : 1px solid #252525;
color : #FFF;
padding : 11px 19px 11px 16px;
border-radius : 4px;
-moz-border-radius : 4px;
-webkit-border-radius: 4px;
}
Setelah itu, Beralihlah Dan Cari Kode <body>Jika Sudah anda temukan Letakkan HTML dibawah ini tepat dibawahnya atau setelah Kode <body> tersebut:
<div id="top_navigation">
<ul class="nav">
<li><a href="#"> Home </a></li>
<li><a href="#"> Your Blog </a></li>
<li><a href="#"> About You </a></li>
<li><a href="#"> More stuff </a></li>
<li><a href="#"> Contact </a></li></ul></div>
Setelah Itu, Save Template anda, dan Lihat Hasilnya....
Ps: Warna Merah Silahkan Ganti Dengan Judul yang ingin anda tampilkan, dan # ganti dengan Url yang ingin dimasukkan...
Selamat Mencoba...
udah di coba, tapi kok error ya? ga bisa di save templatenya? ada yang salah? padahal sudah mengikuti aturannya
BalasHapus-mhn penjelasannya-
gomawo
@ *Spring: bisa lebih spesifik salahnya dimana? dan pesan errornya apa bunyinya???
BalasHapus