Menu horizontal tema gelap

Setelah sebelumnya ngepost Ribbon menu css3, Menu yang punya suara dan juga Vertikal 3d menu sekarang saya ngepost Menu yang bertemakan kegelapan ( bukan ajaran sesat ya ) hehhee tapi menu yang berwarna gelap seperti apa bentuk nya ya kira - kira seperti gambar di bawah ini.



DEMO

Silahkan lihat demonya gan biar gak penasaran, kalau udah langsung praktek kalau ingin menggunakannya.

1. Masuk ke blog anda.
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Cari kode ]]></b:skin>
5. Simpan kode di bawah ini di atas kode ]]></b:skin>

#navigation {
background: #353535; /* Old browsers */
background: -moz-linear-gradient(top, #353535 0%, #2c2c2c 50%, #222222 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(50%,#2c2c2c), color-stop(51%,#222222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #353535 0%,#2c2c2c 50%,#222222 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #353535 0%,#2c2c2c 50%,#222222 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #353535 0%,#2c2c2c 50%,#222222 51%); /* IE10+ */
background: linear-gradient(top, #353535 0%,#2c2c2c 50%,#222222 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
border: 1px solid #222;
box-shadow:0 1px 2px #000, inset 0 1px 0 #4a4a4a, inset 0 -1px 0 #4a4a4a;
-moz-box-shadow:0 1px 2px #000, inset 0 1px 0 #4a4a4a, inset 0 -1px 0 #4a4a4a;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.6), inset 0 1px 0 #4a4a4a, inset 0 -1px 2px #2e2e2e;
display:inline-block;
color:#2d2e2e;
list-style: none;
margin:0;
overflow: hidden;
padding:0;
}
#navigation li {
float: left;
border-right: solid 1px #111;
height: 34px;
}
#navigation li a:link, #navigation li a:visited {
border-right: solid 1px #343434;
color: #9c9c9c;
display: block;
font: bold 12px Arial, sans-serif;
letter-spacing:.1em;
height: 34px;
line-height: 35px;
padding: 0 25px;
text-shadow:0 -1px 0 #111;
text-decoration: none;
text-transform:uppercase;outline: none;
}
#navigation li a:hover {
color: #abc5d9;
text-shadow: 0 0 6px rgba(69,166,248,.9);
-webkit-transition:text-shadow .2s ease-in;
-moz-transition:text-shadow .3s ease-in;
-o-transition:text-shadow .3s ease-in;
transition:text-shadow .3s ease-in;
}  
#navigation li a:active {
background-color:#242424;
border-right:1px solid #1a1a1a;
-webkit-box-shadow:inset 1px 2px 2px rgba(0,0,0,.4);
}
#navigation li.last, #navigation a.last, #navigation li a:link.last {
border:none;
}

6. Tekan CTRL + F atau F3 lalu cari kode ini Header1, kode langkapnya seperti ini

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

7. Lihat kode </div> di bawah kode </div> itu simpan kode di bawah ini

<ul id="navigation">
<li><a href="http://zhinto.blogspot.com/">BERANDA</a></li>
<li><a href="http://zhinto.blogspot.com/2011/01/kode-warna.html">KODE WARNA</a></li>
<li><a href="http://zhinto.blogspot.com/p/jail.html">DAFTAR ISI</a></li>
<li><a href="http://www.facebook.com/adi.zoobex">KONTAK</a></li>
</ul>

Jadi nanti seperti ini kodenya,

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

<ul id="navigation">
<li><a href="http://zhinto.blogspot.com/">BERANDA</a></li>
<li><a href="http://zhinto.blogspot.com/2011/01/kode-warna.html">KODE WARNA</a></li>
<li><a href="http://zhinto.blogspot.com/p/jail.html">DAFTAR ISI</a></li>
<li><a href="http://www.facebook.com/adi.zoobex">KONTAK</a></li>
</ul>

Nah Ngerti kan kalau udah silahkan klik Pratinjau jika menunya sudah muncul klik SIMPAN, menu ini akan muncul di bawah header. sumbernya Lupa :)