Cara Membuat Menu Horizontal Dengan CSS

Cara Membuat Menu Horizontal Dengan CSS | Kali ini kita akan belajar blog tentang cara membuat menu horizontal dengan CSS. Sobat pada tahukan apa itu menu horizontal. Menu ini adalah menu yang tampil secara horizontal diatas header blog kita, bagi kita yang memakai blogspot, dengan menu ini maka blog kita akan sedikit nampak profesional. Hee, gimana ... mantap kan, maka kali ini akan belajar Bagaimana 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
6. Lihat Apa yang terjadi .. :D

Selamat mencoba untuk Cara Membuat Menu Horizontal Dengan CSS. Good luck

loading...