Cara Membuat Menu Horizontal dengan CSS pada Blog

Krumpuls - Cara Membuat Menu Horizontal dengan CSS pada Blog - Apakabar sahabat krumpuls... 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.


Cara Membuat Menu Horizontal dengan CSS pada Blog ini adalah Cara yang saya Gunakan Untuk membuat Menu Navigasi Horisontal Pada Blogg Krumpuls Ini.

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 kode CSS berikut ini

<style type="text/css">

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

div.topbar {
height: 7px;
background: #f6ac14;
}

ul.claybricks {
font-weight: bold;
width: 100%;
background: #FED88A;
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://kumpulanilmu2.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="#">Animasku</a></li>
</ul>

4. Pastekan ke gadget tadi yang HTML/JavaScript
5. Jangan lupa save
6. Lihat Apa yang terjadi ..


Selamat mencoba untuk Cara Membuat Menu Horizontal Dengan CSS.


#tambahan : Kode Asal (sebelum saya ganti)


.page-header .inner {  background-color: #f6ac14;  border-top:7px solid #FED88A; clear: both;  margin: 0 auto;  overflow: hidden;  padding: 19px 0;  }
.page-header p {  font-size: 48px;  text-transform: capitalize;  font-weight: 700;  display: inline-block;  }





Demikianlah artikel yang bisa saya share mengenai Cara Membuat Menu Horizontal dengan CSS pada Blog semoga bermanfaat dan berguna untuk anda semua - Cara Membuat Menu Horizontal dengan CSS pada Blog