Cara Membuat Tab Menu Navigasi Horizontal

\ \ 15 comments
Sobat semua pasti telah mengetahui apa itu tab menu. Tab menu pada dasarnya memiliki dua tipe, yaitu Tipe Horizontal dan Tipe Vertikal. Tetapi yang akan saya bahas pada kesempatan ini yaitu tentang cara membuat tab menu navigasi horizontal pada blog. Sedikit penjelasan tab menu itu memang selalu ada pada setiap blog, hal ini dikarenakan tab menu berfungsi menyimpan URL sehingga blog sobat tidak berantakan sehingga menimbulkan kesan rapi.
Ya sudah langsung saja saya beritahu caranya.

Langkah Pertama :

1. Masuk ke Dasboard.

2. Klik Tab Rancangan.

3. Klik Tab Edit HTML.

4. Silahkan cari di dalam template anda kode ]]></b:skin>


5. Pasang kode CSS di bawah ini sebelum kode tersebut.

.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #000000;}
.menuhorisontal ul{margin:0; padding:0; padding-left:0px; font:13px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#000000; background:#CCCCCC;}
.menuhorisontal li a:hover{color:#FFFFFF; background:#2E2EFE}

6. Klik Simpan Template

Langkah Kedua :

1. Masuk ke Dashboard

2. Klik Tab Rancangan

3. Klik Tab Element Halaman

4. Klik Tambah Gadget yang berada di posisi Header

5. Klik pilihan menu HTML/JavaScript

6. Pastekan script berikut ini ke dalam kolom konten tersebut.
 
<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">
<div class="menuhorisontal">
<li>
<a href="URL">Nama Tab</a>
<a href="URL">Nama Tab</a>
<a href="URL">Nama Tab</a>
<a href="URL">Nama Tab</a>
</li>
</div>
</div>

7. Klik Simpan

8. Selesai.

15 comments:

  1. thank's infonya

    BalasHapus
  2. keren bro . follow juga blog aku .. sukses selalu http://kereninfo.blogspot.com/

    BalasHapus
  3. Tolong kasih tau donkk.., saya tidak tau cara menulis alamat URL untu blog saya.., dan saya tidak tau cara mengisi tabsnya agar dapat di buka..., tolong kasih tau donkk plizzz.., mau tau bgt nehh!! ^^

    BalasHapus
  4. Tolong kasih tau donkk.., saya tidak tau cara menulis alamat URL untu blog saya.., dan saya tidak tau cara mengisi tabsnya agar dapat di buka..., tolong kasih tau donkk plizzz.., mau tau bgt nehh!! ^^

    BalasHapus
  5. kan alamt url berarti alamat posting,,jadi tinggal copy aja alamat url di alamat browser agan trus di replace kode url sedangkan pada kode nama tab isi dengan nama sesuai alamat url nya,,misal tukar link ato yang lainnya..
    kalo kurang paham tanya lagi ya
    sekalian maaf kalo lama balasnya..
    lagi liburan gan.
    jadi jarang onlen

    BalasHapus
  6. thansks sudah share, salam kenal anda visit me back

    BalasHapus
  7. makasih tips nya,,
    ternyata gak susah-susah banget

    BalasHapus
  8. follow back ea brow di http://fajar-juli.blogspot.com
    aku udah follow blog kamu

    BalasHapus
  9. trims ya menu horizaontalnya. dah tak coba SUKSES BRO. untuk ngisi tab nya gimana? saya punya file di slide share. thank's

    BalasHapus
    Balasan
    1. Itu yg kode URL ganti aja link ke file slide share kamu sob, di bagian nama tab isi dengan judul tab nya,,

      Hapus