Cara membuat menu horizontal dibawah header blog

Dalam membuat Menu Horizontal diblog ada yang ditempatkan dibawah atau diatas header blog, dalam pembuatannya ada yang jenis dropdown dan tanpa dropdown tergantung kebutuhan. Cara Membuat Menu Dropdown Horizontal dibawah header blog dapat dilakukan dengan langkah-langkah sebagai berikut:


  1. Sign in diblog
  2. Klik Edit HTML
  3. Centang Expand Template Widget
  4. Cari kode ]]> </ b: skin> (gunakan ctrl + F untuk memudahkan pencarian)
  5. Copy dan pastekan Kode CSS dibawah ini dan tempatkan diatas kode ]]> </ b: skin>   
  6. Klik Pratinjau untuk melihat kesalahan
  7. Klik Simpan

  8. .menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
    .menu ul{
    background:red;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
    .menu li{
    float:left;
    padding:0px;
    }
     .menu li{
    float:left;
    padding:0px;
    }
    .menu li a{
    background:red;
    display:block;
    font-weight:normal;
    line-height:35px;
    margin:0px;
    padding:0px 25px;
    text-align:center;
    text-decoration:none;
    }
    .menu li a:hover, .menu ul li:hover a{
    background: red;
    text-decoration:none;
    }
    .menu li ul{
    background:red;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:225px;
    z-index:1;
    }
    .menu li:hover ul{
    display:block;
    }
    .menu li li {
    background:red;
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:225px;
    }
    .menu li:hover li a{
    background:none;
    }
    .menu li ul a{
    display:block;
    height:35px;
    font-size:12px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
    }
    .menu li ul a:hover, .menu li ul li:hover a{
    background:red;
    border:0px;
    color:red;
    text-decoration:none;
    }

    Keterangan

    Kode warna red = Ganti warna sesuai dengan selera

    Memasang kode html drop down menu di tata letak blog dibawah Header

    1. Klik Tata letak dibawah header
    2. Klik HTML/Java Script
    3. Copy dan pastekan Kode CSS dibawah ini di kolom konten HTML/Java Script
    4. Klik Simpan dan lihat hasilnya

    <div style="text/css">
    <ul class="menu">
    <li><a href="URL  alamat blog">HOME</a></li>
    <li><a href="URL  alamat blog">PROPIL</a></li>
    <li><a href="URL  alamat blog">FACEBOOK</a></li>
    <li><a href=""> JUDUL  1</a>
    <ul>
    <li><a href=" URL  alamat blog "> JUDUL  1</a></li>
    <li><a href=" URL  alamat blog "> JUDUL  1</a></li>
    </ul>
    </li>
    <li><a href=""> JUDUL 2</a>
    <ul>
    <li><a href=" URL  alamat blog "> JUDUL 2</a></li>
    <li><a href=" URL  alamat blog "> JUDUL 2</a></li>
    </ul>
    </li>
    <li><a href=" URL  alamat blog”>JUDUL </a>
    <li><a href=" URL  alamat blog "> JUDUL </a>
    <li>
    </li>
    </ul>
    </div>

    Keterangan

    Kode warna MERAH = Ganti dengan alamat dan judul postingan nya kawan

    Silahkan berkarya


Baca juga artikel menarik lainnya :

13 komentar:

  1. menarik gan
    folloback gan
    http://robertkarnanto-home.blogspot.com/

    BalasHapus
  2. owalah,, menarik nih om :D kunjungi balik blog ku ya (belajar VPS) http://www.abdusatri.com/

    BalasHapus
  3. repot ternyata, jadi males aku gan! hhahaha.

    BalasHapus
  4. mantap dah tutornya kawan
    http://acemaxs31.com/obat-gagal-ginjal-herbal/
    http://i-bikeco.com
    http://mas-galih.com

    BalasHapus
  5. Cara ganti backgroundnya biar gx putih gimana gan?

    BalasHapus
  6. mantap gan infonya..
    http://arifinaba.blogspot.com/

    BalasHapus
  7. mantap gan kunjungi blog saya kalau mau belajar bhasa inggris gampang tanpa kursus

    BalasHapus
  8. https://mrawanengl.blogspot.co.id/

    BalasHapus
  9. Mantap jangan lupa kunjungan balik nya di hack4bee.blogspot.com

    BalasHapus