Cari Artikel Blog Ini

Total Tayangan Halaman

TAB MENU HORIZONTAL DENGAN CSS VERSI 5

Tampil dengan variasi warna orange dan biru muda, warna hover biru muda dan border bawah dengan ukuran yang agak tebal yaitu 10px dengan warna orange serta warna latar belakang abu-abu muda.
Warna latar belakang dan warna border bawah dapat anda ganti sesuai keinginan yang penting fahami dulu kode-kode yang digunakan.

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 {
    margin:0;
    padding:0;
    font: bold 11px/1.5em Verdana;
    }
    #tabs {
    float:left;
    width:100%;
    background:#EFF4FA;
    font-size:93%;
    line-height:normal;
    border-bottom:10px solid #DD740B;
    }
    #tabs ul {
    margin:0;
    padding:10px 10px 0 50px;
    list-style:none;
    }
    #tabs li {
    display:inline;
    margin:0;
    padding:0;
    }
    #tabs a {
    float:left;
    background:url("https://lh6.googleusercontent.com/_1j80TgNqd_8/TbaYaT6KL7I/AAAAAAAACto/Y5bV8ctYFNE/tableft.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 5px;
    text-decoration:none;
    }
    #tabs a span {
    float:left;
    display:block;
    background:url("https://lh5.googleusercontent.com/_1j80TgNqd_8/TbaYaFRKa3I/AAAAAAAACtk/RXQSL3iw1vw/tabright.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#FFF;
    }
    #tabs a span {float:none;}

    #tabs a:hover span {
    color:#FFF;
    }
    #tabs a:hover {
    background-position:0% -42px;
    }
    #tabs a:hover span {
    background-position:100% -42px;
    }

    #tabs #current a {
    background-position:0% -42px;
    }
    #tabs #current a span {
    background-position:100% -42px;
    }
    </style><div id="tabs">
    <ul>
    <li id="current"><a href="Url 1"><span>Menu 1</span></a></li>
    <li><a href="Url 2"><span>Menu 2</span></a></li>
    <li><a href="Url 3"><span>Menu 3</span></a></li>
    <li><a href="Url 4"><span>Menu 4</span></a></li>

    <li><a href="Url 5"><span>Menu 5</span></a></li>
    <li><a href="Url 6"><span>Menu 6</span></a></li>
    <li><a href="Url 7"><span>Menu 7</span></a></li></ul>
    </div>



    1. Kode dengan warna pink, coklat muda, coklat tua, merah dan kuning merupakan kode yang dapat anda ganti
    2. Kode berwana pink : border-bottom:10px solid #DD740B meupakan ukuran ketebalan boder bawah dan warna boder bawah. Ganti ukuran dan warna tersebut dengan yang anda inginkan
    3. Kode berwarna coklat muda : https://lh6.googleusercontent.com/_1j80TgNqd_8/TbaYaT6KL7I/AAAAAAAACto/Y5bV8ctYFNE/tableft.gif merupakan alamat latar 1. Ganti alamat gambar tersebut dengan milik anda. Ini tampilan gambarnya :



    4. Kode berwarna coklat tua :https://lh5.googleusercontent.com/_1j80TgNqd_8/TbaYaFRKa3I/AAAAAAAACtk/RXQSL3iw1vw/tabright.gif merupakan alamat latar 2. Ganti alamat gambar tesebut dengan milik anda. Ini tampilan gambarnya :



    5. Kode berwarna merah : Url 1,2, 3, 4, 5, 6 dan 7 merupakan alamat Link target dari setap menu. Ganti alamat tersebut dengan URL/link target dari blog anda.
    6. Kode berwarna kuning : Menu 1, 2, 3, 4, 5, 6 dan 7 merupakan menu dari blog anda yang akan tampil pada tab menu. Ganti kode tersebut dengan menu yang ingin anda tampilkan.
    7. Tambahkan beberapa menu lainnya sesuai dengan keperluan
  6. Setelah selesai pengeditan, klik tombol Simpan
  7. Lihat Tab Menu Horizontal pada blog anda sekarang.


Selamat mencoba, semoga bermanfaat....

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
0 Comments

0 komentar :

Posting Komentar

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