Cari Artikel Blog Ini

Total Tayangan Halaman

TAB MENU HORIZONTAL DENGAN CSS VERSI 4

Bagi anda yang memiliki blog dengan latar belakang gelap seperti EPG Studio, agar tampilannya tambah gelap sangat cocok menggunakan tab meu horizontal versi 4 ini.
Dengan latar belakang berwarna hitam ditambah dengan dua gambar yang juga warna gelap yaitu merah tua dengan hover merah kehitaman akan mejadikan tampilan blog anda semakin gelap.

Demo : perhatikan contoh dibawah ini :



CARA MEMBUATNYA
  1. Masuk ke Blogger
  2. Pilih Rancangan bagian Elemen Halaman
  3. Klik Tambah Gadget
  4. Pilih TML/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:#000;
    font-size:93%;
    line-height:normal;
    }
    #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://lh4.googleusercontent.com/_1j80TgNqd_8/TbOEqG7ofzI/AAAAAAAACrs/c-6zsCALPGs/1.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    }
    #tabs a span {
    float:left;
    display:block;
    background:url("https://lh4.googleusercontent.com/_1j80TgNqd_8/TbOEp_K1gEI/AAAAAAAACro/c7MaeFflm2M/2.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><a href="Url/alamat link target 1"><span>MENU 1</span></a></li>
    <li><a href="Url/alamat link target 2"><span>MENU 2</span></a></li>
    <li><a href="Url/alamat link target 3"><span>MENU 3</span></a></li>
    <li><a href="Url/alamat link target 4"><span>MENU 4</span></a></li>

    <li><a href="Url/alamat link target 5"><span>MENU 5</span></a></li>
    <li><a href="Url/alamat link target 6"><span>MENU 6</span></a></li>
    <li ><a href="Url/alamat link target 7"><span>MENU 7</span></a></li>
    <li><a href="Url/alamat link target 8"><span>MENU 8</span></a></li></ul>
    </div>


    1. Pengeditan kode dapat anda lakukan dengan memperhatikan kode yang berwarna ungu muda, ungu tua, merah dan kuning
    2. Kode berwarna ungu muda : https://lh4.googleusercontent.com/_1j80TgNqd_8/TbOEqG7ofzI/AAAAAAAACrs/c-6zsCALPGs/1.gif merupakan alamat gambar untuk latar 1. Ganti alamat gambar tersebut dengan alamat gambar milik anda sendiri. Tampilan gambarmya seperti ini :


    3. Kode yang berwarna ungu tua : https://lh4.googleusercontent.com/_1j80TgNqd_8/TbOEp_K1gEI/AAAAAAAACro/c7MaeFflm2M/2.gif merupakan alamat gambar untuk latar 2. Ganti alamat gambar tersebut dengan alamat gambar milik anda sendiri. Tampilan gambarmya seperti ini :


    4. Kode bermarna merah : Url/alamat link target 1, 2, 3, 4, 5, 6, 7 dan 8 merupakan URL/alamat link target (jika menu diklik akan terbuka halaman lain sesuai URL/alamat link target yang anda pasang). Ganti kode tersebut dengan URL/alamat link target yang ingin anda tampilkan.
    5. Kode berwarna kuning : MENU 1,2 , 3, 4, 5, 6, 7dan 8 merupakan menu yang akan tampil pada tab menu. Ganti kode tesebut dengan menu yang ingin anda tampilkan.
    6. Jumlah menu yang ditampilkan pada tab menu horizontal versi 4 ini sebanyak 8 menu. Anda dapat menambah jumlah menu tersebut sesuai dengan keinginan.
  6. Setelah selesai pengeditan kode diatas, klik tombol Simpan
  7. Lihat tab menu horizontal pada blog anda.
Selamat mencoba semoga bermanfaat...

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
1 Comments

1 komentar :

e1mettresz mengatakan...

saya tidak tau cara menganti menu seperti url 1 jadi branda tau lain y

Posting Komentar

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