Cari Artikel Blog Ini

Total Tayangan Laman

TAB MENU VERTIKAL DENGAN CSS VERSI 3

Tampil dengan variasi warna latar antara abu-abu muda dan abu-abu tua, hover dengan warna abu-abu tua dan tombol kecil berwana merah serta warna latar transparan.
Seperti biasa, jumlah menu yang tampil pada contoh tab menu horizontal ini sebanyak 7 menu. Anda dapat menambah jumlah menu sesuai keperluan.
Demo : perhatikan gambar dibawah ini :



CARA MEMBUATNYA
  1. Masuk ke Blogger
  2. Pilih Rancangan bagian Elemen Halaman
  3. Klik Tambah Gadget
  4. Pilih HTML/JavaScript
  5. Copy kode dibawah ini, kemudian paste pada kolom yang tersedia

    <style type="text/css">

    body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    font-size: 80%;
    font-weight: bold;
    background: #FFF;
    }

    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    img {
    border: none;
    }



    #menu {
    width: 200px;
    margin: 10px;
    }

    #menu li a {
    height: 32px;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 24px;
    text-decoration: none;
    }

    #menu li a:link, #menu li a:visited {
    color: #FFF;
    display: block;
    background: url(https://lh6.googleusercontent.com/_1j80TgNqd_8/TbaoHVOmGzI/AAAAAAAACuE/RR5jv_uc0Rk/menu.gif);
    padding: 8px 0 0 30px;
    }

    #menu li a:hover, #menu li #current {
    color: #FFF;
    background: url(https://lh6.googleusercontent.com/_1j80TgNqd_8/TbaoHVOmGzI/AAAAAAAACuE/RR5jv_uc0Rk/menu.gif) 0 -32px;
    padding: 8px 0 0 30px;
    }
    </style>
    <div id="menu">
    <ul>
    <li><a id="current" href="Url 1">Menu 1</a></li>
    <li><a href="Url 2">Menu 2</a></li>
    <li><a href="Url 3">Menu 3</a></li>
    <li><a href="Url 4">Menu 4</a></li>
    <li><a href="Url 5">Menu 5</a></li>
    <li><a href="Url 6">Menu 6</a></li>
    <li><a href="Url 7">Menu 7</a></li> </ul>
    </div>


    1. Kode yang berwarna pink, coklat, merah dan kuning dapat anda edit
    2. Kode berwarna pink : background: #FFF; merupakan kode warna untuk latar tab menu
    3. Kode berwarna coklat : https://lh6.googleusercontent.com/_1j80TgNqd_8/TbaoHVOmGzI/AAAAAAAACuE/RR5jv_uc0Rk/menu.gif merupakan kode alamat gambar latar. (ada dua). Ganti dengan alamat gambar milik anda. Tampilan gambar seperti dibawah ini :



    4. Kode berwarna merah : Url 1, 2, 3, 4, 5, 6 dan 7 merupakan URL/alamat link target dari setiap menu. Ganti dengan URL.alamat link target dari blog anda
    5. Kode berwarna kuning : Menu 1, 2, 3, 4, 5, 6 dan 7 merupakan menu yang tampil pada tab menu. Ganti dengan menu yang ingin anda tampilkan.

  6. Setelah selesai pengeditan, klik tombol Simpan
  7. Lihat Tab Menu Vertikan pada blog anda.


Selamat mencoba, semoga bermanfaat....

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
1 Comments

1 komentar :

bagashp mengatakan...

sip gan

Poskan Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!