-->
  • Cara Membuat Menu Horizontal


    Dalam postingan saya kali ini, saya akan berbagi kepada teman semua tentang sebuah Menu Horizontal dengan tampilan yang sederhana namun mempunyai daya tarik sendiri untuk beberapa orang termasuk saya. Hehehe. Yups, tidak perlu menjelaskannya lebih panjang lagi karena saya yakin teman sudah tahu dan pernah melihatnya. Tampilannya akan terlihat seperti gambar diatas.

    Berikut adalah cara untuk memasangnya diblog teman :

    Pertama. Teman Login keblog teman.
    Kedua. Menuju Rancangan.
    Ketiga. Klik Tambah Gadget dan pilih HTML/JavaScript.
    Keempat. Copy script dibawah ini dan Pastekan kedalamnya.


    <style>
    /*---------------------------------------------------------------------------------*/
    /* CATEGORY MENU */
    /*---------------------------------------------------------------------------------*/
    #cat-menu { background:none; height:35px;}
    /* category navigation */
    .nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
    .nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
    .nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
    .nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
    .nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
    <div id='cat-menu'>
    <ul class='sf-menu nav' id='cat-nav'>
    <li><a href='/'>Home</a></li>
    <li><a href='#'> Nama Menu 1</a></li>
    <li><a href='#'> Nama Menu 2</a></li>
    <li><a href='#'> Nama Menu 3</a></li>
    <li><a href='#'> Nama Menu 4</a></li>
    <li><a href='#'> Nama Menu 5</a></li>
    </ul>
    </div>


    Kelima. Kalau sudah selesai, teman sudah bisa menyimpannya dan letakan kode yang baru teman Save ketempat yang teman inginkan misalnya dibawah Header.

    Catatan :
    Perhatikan kodenya. Pada tulisan atau kode yang berwarna MERAH teman ubah dengan alamat URL atau Link tujuan teman. Dan pada tulisan yang berwarna BIRU teman ubah dengan nama dari link tujuan teman. Selamat mencoba. Enjoy
  • You might also like

    No comments:

    Post a Comment

    Berikan komentar positif Anda tentang artikel ini