Cari Artikel Blog Ini

Total Tayangan Laman

TAB MENU VERTIKAL DENGAN CSS VERSI 2

Perpaduan warna latar antara warna biru dengan warna orange dan ditambah penunjuk arah (anak panah) dengan persilangan dari warna latar secara umum.
Penampilan Tab Manu Horizontal versi 2 ditata dengan warna yang lembut sehingga sangat nyaman utuk dipandang apalagi kalau dipadukan dengan warna blog yang selaras dengan tampilan dari tab menu ini.


Demo :



LANGKAH-LANGKAHNYA

  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: 5px;
    }

    #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/TbDbvTH4KoI/AAAAAAAACns/BrFma12kNvY/menu.gif);
    padding: 8px 0 0 45px;
    }

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


  6. Cara pengeditan kode
    1. Kode berwarna coklat (dua buah) : https://lh6.googleusercontent.com/_1j80TgNqd_8/TbDbvTH4KoI/AAAAAAAACns/BrFma12kNvY/menu.gif merupakan alamat gambar latar. Ganti dengan alamat gambar milik anda. ni gambarnya :


    2. Kode berwarna merah : URL/alamat menu 1, 2, 3, 4, 5, 6 dan 7 merupakan URL/alamat link target dari menu. Ganti dengan URL/alamat link target yang ngin anda tampilkan.
    3. Kode berwarna kuning : Menu 1, 2, 3, 4, 5, 6 dan 7 merupakan menu yang akan tampil, ganti dengan menu yang anda inginkan.
    4. Tambahkan beberapa menu lainnya setelah anda memahami kode-kode diatas
  7. Setelah selesai pengeditan, klik tombol Simpan
  8. Lihat Tab Menu Horizontalpada blog anda.

Selamat mencoba, semoga bermanfaat...

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
4 Comments

4 komentar :

Mr-Jenggo mengatakan...

SAYA SUDAH BERHASIL MEMBUAT MENU INI DI BLOG SAYA, TAPI MASIH BELUM BISA MEMBUAT ISINYA ALIAS DI MENU URL/alamat menu 1, 2, 3, 4, 5, 6 dan 7 merupakan URL/alamat link target dari menu. Ganti dengan URL/alamat link target yang ngin anda tampilkan. DISITU SAYA TIDAK BISA MEMBUAT LINK YG DITUJU KARENA SAYA BELUM MENGERTI MAKSUDNYA.... MOHON INFONYA TERIMA KASIH

smartpulsa-88 mengatakan...

Terimakasih Gan, tutornya sangat membantu...
Salam Blogger...

Ades Sambas mengatakan...

@smartpulsa-88 Sama-sama...

Sarif Hidayat mengatakan...

Maaf Gan, mau nanya, kalo mau buat kotak kaya yang di bawah blog agan itu gimana ya ??

Posting Komentar

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