Cara Membuat Menu Horisontal

Selamat bertemu kembali. Posting kali ini merupakan pembahasan yang sebenarnya sudah tidah baru lagi. Tapi untuk lebih memahaminya, saya mencoba untuk mempostingnya kembali......

Langsung saja ke pokok bahasannya. Menu horizontal. Menu ini adalah menu mendatar dan bertingkat ke bawah. Lihat aja contohnya di bagian menu blog ini. Kalau masih ada yang belum paham, silahkan baca tulisan ini sampai akhir.

  1. Langkah pertama yang haru dilakukan adalah. Login ke blog Anda seperti biasa.
  2. Klik Rancangan kemudian Edit HTML.
  3. Jangan lupa download dulu template Anda untuk menjaga kemungkinan gagal.
  4. Centang Expand Template Widget.
  5. Letakkan kode berikut di atas ]]></b:skin>. Untuk memudahkan mencari kodenya, tekan control F.

    #menublog {
    width:919px;
    float:left;
    margin:0;
    padding: 10px;
    background: aqua;
    }
    #menu {
    margin:0;
    padding:0;
    }
    #menu a {
    font-family: Comic Sans MS;
    color: black;
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;
    padding: 10px;
    }
    #menu a:hover {
    color: #fff;
    font-weight: normal;
    text-decoration: none;
    background: black;
    }
  6. Selanjutnya, cari kode berikut:

    <div id='header'>
    ...............
    ...............
    </div>
  7. Kemudian letakkan kode berikut di bawah kode tadi.

    <div id="menublog">
    <div id="menu">
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Halaman Utama Anak Pesisir">Home</a>
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Template Galeri">Template Galeri</a>
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Belajar">Belajar</a>
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Profil">Profil</a>
    <a href="http://www.ilmublog.co.cc/" target="_blank" title="Kontak">Kontak</a>
    </div>
    </div>
  8. Silahkan ganti tulisan berwarna hijau sesuai dengan selera dan ukuran blog Anda. Untuk kesesuaian selera, silahkan ubah jenis huruf, ukuran huruf dan lainnya. Okey!
  9. Langkah terakhir adalah Save Template. Selesai

Terima kasih. Selamat belajar. Jangan lupa komentarnya ya.......!!!!

Artikel Lain: