Menu Horizontal Dark Style dengan CSS

Sebelumnya saya pernah share cara membuat dropdown menu horizontal. Kali ini saya akan menerangkan cara membuat menu horizontal dark style dengan css. Cara kerja widget ini pada dasarnya sama dengan menu yang lainnya, namun perbedaannya terdapat pada tempilan yang elegan dan sangat cocok dipasang pada blog. Disamping itu bentuknya yang stylish dapat menjadi daya tarik tersendiri bagi blog anda. Yang jelas widget ini tidak memberatkan loading blog. Sekarang mari kita bahas cara membuat menu horizontal dakr style dengan css. Ikuti langkah berikut.

Log in ke blogger
Klik Template
Klik Edit HTML
Klik Lanjutkan
Masukkan kode berikut di atas kode ]]></b:skin>

.containerbt{margin:0 auto; width:610px; text-align:center; height:300px}
ul.dark_menu{
 list-style:none; padding:0; font-family:Arial; font-size:14px; line-height:14px}
ul.dark_menu:after{content:""; clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0}
ul.dark_menu li{float:left; margin:0 0 0 10px; position:relative}
ul.dark_menu li:first-child{margin:0}
ul.dark_menu li a, ul.dark_menu li a:link{color:#FFFFFF; text-decoration:none;
display:block; padding:10px 26px; text-shadow:0 1px 0 #4b433e; background:#362f2c;
background:-moz-linear-gradient(top,#362f2c 0%,#282321 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#362f2c),color-stop(100%,#282321)); background:-webkit-linear-gradient(top,#362f2c 0%,#282321 100%);
background:-o-linear-gradient(top,#362f2c 0%,#282321 100%);
background:-ms-linear-gradient(top,#362f2c 0%,#282321 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c',endColorstr='#282321',GradientType=0 );
background:linear-gradient(top,#362f2c 0%,#282321 100%);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 0 #564b46,0 1px 1px #181514;
-moz-box-shadow:inset 0 1px 0 #564b46,0 1px 1px #181514;
 box-shadow:inset 0 1px 0 #564b46,0 1px 1px #181514;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-o-transition:all 1s ease;
-ms-transition:all 1s ease;
transition:all 1s ease}

ul.dark_menu li a:hover{
color:#73635e;
text-shadow:0 1px 1px #000;
background:#282321;
background:-moz-linear-gradient(top,#282321 0%,#362f2c 99%,#362f2c 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#282321),color-stop(99%,#362f2c),color-stop(100%,#362f2c));
background:-webkit-linear-gradient(top,#282321 0%,#362f2c 99%,#362f2c 100%);
background:-o-linear-gradient(top,#282321 0%,#362f2c 99%,#362f2c 100%);
background:-ms-linear-gradient(top,#282321 0%,#362f2c 99%,#362f2c 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321',endColorstr='#362f2c',GradientType=0 );
background:linear-gradient(top,#282321 0%,#362f2c 99%,#362f2c 100%); -webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease}

ul.dark_menu li a.selected, ul.dark_menu li a:active{
color:#73635e; background:#282321;
text-shadow:0 1px 1px #000;
-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f; -moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f; box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
-webkit-transition:all 1s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; -ms-transition:all 1s ease; transition:all 1s ease}
ul.dark_menu li ul{display:none}
ul.dark_menu li ul:before{content:""; position:absolute; display:block; z-index:1500; left:0; top:-10px; height:10px; width:100%}
ul.dark_menu li:hover ul{
position:absolute; display:block; z-index:1000; left:0; top:44px; padding:5px 0; list-style:none; background:#282321;
-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f; -moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
box-shadow:inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px}
ul.dark_menu li ul li{
float:none; margin:0 10px; border-bottom:1px solid #191614; border-top:1px solid #3a3230}
ul.dark_menu li ul li:first-child{
margin:0 10px;
border-top:0 none}
ul.dark_menu li ul li:last-child{
border-bottom:0 none}
ul.dark_menu li ul li a, ul.dark_menu li ul li a:link{
color:#73635e; display:block; background:transparent none; padding:10px 20px 10px 5px; white-space:nowrap; text-shadow:0 1px 2px #000; -webkit-box-shadow:0 0 0 rgba(0,0,0,0); -moz-box-shadow:0 0 0 rgba(0,0,0,0); box-shadow:0 0 0 rgba(0,0,0,0);
-webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px}
ul.dark_menu li ul li a:hover{text-decoration:underline; background:#2a2523}

Selanjutnya klik Simpan Template
Sekarang klik Tata Letak
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya

<div class="container">
<!-- Dark Menu Begin -->
<ul class="dark_menu">
<li><a href="Link anda di sini" class="selected">Home</a></li>
<li>
<a href="#">Download</a>
<!-- Sub Menu Begin -->
<ul>
<li><a href="Link anda di sini">Menu Link 1</a></li>
<li><a href="Link anda di sini">Menu Link 2</a></li>
<li><a href="Link anda di sini">Menu Link 3</a></li>
<li><a href="Link anda di sini">Menu Link 4</a></li>
</ul>
<!-- Sub Menu End -->
</li>
<li>
<a href="#">Blog</a>
<!-- Sub Menu Begin -->
<ul>
<li><a href="Link anda di sini">Menu Link 1</a></li>
<li><a href="Link anda di sini">Menu Link 2</a></li>
<li><a href="Link anda di sini">Menu Link 3</a></li>
<li><a href="Link anda di sini">Menu Link 4</a></li>
</ul>
<!-- Sub Menu End -->
</li>
<li>
<a href="#">Arsip</a>
<!-- Sub Menu Begin -->
<ul>
<li><a href="Link anda di sini">Menu Link 1</a></li>
<li><a href="Link anda di sini">Menu Link 2</a></li>
<li><a href="Link anda di sini">Menu Link 3</a></li>
<li><a href="Link anda di sini">Menu Link 4</a></li>
</ul>
<!-- Sub Menu End -->
</li>
<li><a href="Link anda di sini">About</a></li>
<li><a href="Link anda di sini">Contact</a></li>
</ul>
<!-- Dark Menu End -->
</div>

Ganti semua tulisan dengan cetak tebal sesuai kebutuhan anda.
Demikian tutorial cara membuat menu horizontal dakr style dengan css.
Selamat mencoba dan sukses selalu.

Special Thanks to Bloggertrix.com for the script

"keep spirits and do the best"