cara menu horizontal css

Cara membuat menu horizontal itu.

OK, untuk sobat yang penasaran bagaimana bentuk menu horizontal itu, maka sobat bisa melihat pada screen short berikut ini.



Bagaiamana? menarikkan, OK agar tidak membuang-buang waktu mari kita langsung mempelajari cara membuat menu horizontal dengan CSS.

LANGKAH-LANGKAH MEMBUAT MENU HORIZONTAL DENGAN CSS

1. Log in ke http://blogger.com/
2. Kemudian sobat klik tata letak -> Tambah gadget -> Pilih HTML/JavaScript
3. Salin dan kopi LUWAK kode CSS berikut ini 

<style type="text/css">

/* Menu horizontal untuk Blogger http://tgkboy.blogspot.com/ */

div.topbar {
height: 16px;
background: #e16031;
}

ul.claybricks {
font-weight: bold;
width: 100%;
background: #e3e490;
padding: 6px 0 6px 0;
margin: 0;
text-align: left;
font-family: calibri;
}

ul.claybricks li {
display: inline;
}

ul.claybricks li a {
color: black;
padding: 6px 8px 4px 8px;
margin-right: 20px;
text-decoration: none;
}

ul.claybricks li a:hover, ul.claybricks li a.selected {
color: white;
background: #5d4137;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959;
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px;
padding-bottom: 6px;
}

/* http://tgkboy.blogspot.com */

</style>
<div class="topbar">
</div>
<ul class="claybricks">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">tgkboy</a></li>
</ul>

4. Pastekan ke gadget tadi yang HTML/JavaScript
5. Jangan lupa save