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.

Cara Membuat Menu Horizontal Dengan CSS

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...

9 komentar:

  1. mksih tutorialnya
    kunjungi juga
    http://otobiazza.blogspot.com

    BalasHapus
  2. Thank's msukan nya..
    follback y..

    http://itzone12.blogspot.com/

    BalasHapus
  3. mksh,
    follback y

    http://itzone12.blogspot.com/

    BalasHapus
  4. Di letakkan di manaaaa....? Kasih inponya yang engkaap duuunk...

    BalasHapus
    Balasan
    1. kode itu diletakkan di dalam gadget HTML/JAVASCRIPT. kemudain letakkan gadget itu di header [drag aja]

      Hapus
  5. sudah saya coba gan silahkan diliahat http://infobagus-foryou.blogspot.com ditunggu gan

    BalasHapus
  6. Sob, gw coba bisa. tapi hanya tampilan .... waktu di klik gk muncul apa"

    cara Ngebuka nya Ringkasannya yak apa?

    BalasHapus
    Balasan
    1. all@ Gini sob...!
      Yang ada tulisan pagar # yang berwarna merah diganti dengan links yang ingin sobat masukkan,,,pada tulisan merah sebelahnya ganti dengan tulisan yang sobat ingnikan. Thank

      Hapus