Membuat menu transparan dengan css3

Membuat menu transparan dengan css3 ini akan membuat blog anda lebih fresh karena CSS3 memang keren nah menu yang akan kita buat kali ini akan berbentuk seperti gambar di bawah ini.



Percampuran background linear biru dengan warna rgba sungguh serasi menurut aku. hemm cocok banget

1. Simpan kode di bawah ini di atas kode ]]></b:skin>

/* Menu By http://zhinto.blogspot.com/ */
#css3_navigation {
    background: #499bea;
    background: -moz-linear-gradient(top, #499bea 0%, #207ce5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499bea), color-stop(100%,#207ce5));
    background: -webkit-linear-gradient(top, #499bea 0%,#207ce5 100%);
    background: -o-linear-gradient(top, #499bea 0%,#207ce5 100%);
    background: -ms-linear-gradient(top, #499bea 0%,#207ce5 100%); 
    background: linear-gradient(top, #499bea 0%,#207ce5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=0 );
    list-style: none;
    padding: 3px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #333;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 5px #333;
    -webkit-box-shadow: 0 0 5px #333;
    box-shadow: 0 0 5px #333
    }

ul#css3_navigation li {
    display: inline-block;
    padding: 0;
    float: left;
    margin: 0 0 0 5px;
    border: 1px solid #444;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px
    }

ul#css3_navigation li:first-child {
    margin: 0
    }

ul#css3_navigation li a {
    background: rgba(0, 0, 0, 0.3);
    display: inline-block;
    padding: 3px 5px;
    color: #def;
    text-decoration: none;
    font: normal 12px/20px Arial Narrow, sans-serif;
    text-transform: uppercase;
    outline: none;
    -moz-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2)
    }

ul#css3_navigation li a:hover {
    background: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2)
    }

5. Setelah itu cari kode seperti di bawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nama blog anda (Header)' type='Header'/>
</b:section>
</div>

6. Setelah itu simpan kode di bawah ini di bawah kode </div>

<ul id="css3_navigation">
<li><a href="/">beranda</a></li>
<li><a href="#">System of blog</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Kontak Me</a></li>
<li><a href="#">Artikel ku</a></li>
</ul>

7. Klik Pratinjau setelah anda lihat menunya muncul klik SIMPAN TEMPLATE.