Laman

17 Februari 2010

Membuat Tab Menu

Sebenernya cara untuk membuat tab menu ini sudah banyak bertebaran di internet. tapi karena permintaan temen, aku tuliskan lagi cara  membuat tab menu. mudah-mudahan bermanfaat bagi kita semua. caranya adalah sebagai berikut:
seperti biasa,  pertama  login dulu di blog kamu....
kemudian masuk ke Tata Letak  Trus... Edit HTML
Saya sarankan untuk backup template terlebih dahul, untuk menghindarkan hal" yang tidak di inginkan
kemudian kamu cari kode berikut : ]]></b:skin>

setelah ketemu copykan kode berikut pas di atasnya:
#tabmenu {
 overflow: hidden;
 font-size: 12px;
 float: left;
 display: inline;
background:#70DBFF;          /*warna tab menu */
 width: 900px;                        /* panjang tabmenu */
 height: 30px;                         /*tinggi tab menu*/
}
#tabmenu a {
 text-decoration:none;
 display:block;
}
#tabmenu a {
 margin:0;
 float:left;
 background: none;
 padding: 9px 15px;
 text-transform:uppercase;
 color: #CCCCCC;
 font-size: 11px;
}
#tabmenu li a:hover, #tabmenu li a:focus, #tabmenu a.mainMenuParentBtnFocused{
 background: #8FABFF;     /*warna hover*/
 color:#fff;
}
#tabmenu , #tabmenu ul {
 padding: 0;
 margin: 0;
 list-style: none;
 line-height: 1em;
}
#tabmenu ul {
 background: none;
 left:0;
}
#tabmenu li {
 border-right:1px solid #fff;
 cursor: pointer;
 float: left;
 margin: 0 0px 0 0px;
 padding: 0 2px 0 1px;
 height: 30px;
 display: inline;
}

setelah itu kamu cari lagi kode berikut: <div id='main-wrapper'>

dan copykan kode berikut di atasnya:
<div id='tabmenu'>
<ul>
<li><a href='link-mu' target='_blank'>value</a></li>
<li><a href='link-mu' target='_blank'>value</a></li>
<li><a href='link-mu' target='_blank'>value</a></li>
<li><a href='link-mu' target='_blank'>value</a></li>
</ul>
</div>
Perhatikan...
Untuk mengetahui kode warna kamu bisa lihat disini
Untuk menyesuaikan panjang Tabmenu dengan blog kamu  rubah nilai  width_nya.
Tulisan berwarna pink adalah link yang akan dituju bila di klik.
Tulisan berwarna hijau adalah value dari tabmenu tersebut.
sebagai contoh dalam penulisannya, adalah sebagai berikut.
<li><a href='http://www.mastra.co.cc' target='_blank'>My Blog</a></li>

gitu aja ko, kemudia simpan dan lihat hasilnya....
semoga bermanfaat bagi kita semua....

20 komentar:

  1. udh q coba,
    tp mnurut q kurang memuaskan

    g ada efek slow motionnya,
    biar ada ditambahin dmnnya y sob???
    mohon bantuannya???
    thnks..!!!!

    BalasHapus
  2. lupa kok koment' thank nah friend1

    BalasHapus
  3. @artana : ok tks balok sob dah mampir....

    BalasHapus
  4. mas ribet bgt ada cara yg simple gk?

    BalasHapus
  5. @alwiyah hani : ribet gimana mbak...???
    mbak coba lagi dengan sabar saya yakin pasti bisa...

    BalasHapus
  6. kalo nambahin drop down tab menu giman brow ? mohon bantuanya............

    BalasHapus
  7. mas tetep aja ribet aku gk bisa

    BalasHapus
  8. @alwiyah hani : wah gimana ya.... boba mbak baca dlu n pahami dkt.. pasti bisa soalnya kemarin ada yang nyoba lancar2 aja ko... good luck...

    BalasHapus
  9. @artana's blog : kamu bisa tambahkan subnya mang dan tambah kan juga di css nya...

    BalasHapus
  10. mas aku udah coba 7 kali tetep gk bisa ada cara lain gk?

    BalasHapus
  11. @alwiyah hani : wah.. masak gak bisa mbak...
    kalau boleh tau mbak e dapat kesulitan dimana, alnya kemarin audah ada yang coba pakai cara itu aman" saja ko mbak...

    BalasHapus
  12. Mas kalo div (id='main-wrapper')
    nya g ketemu gimana??

    BalasHapus
  13. @yuan :sob kita taruh di atas tag <div id='main-wrapper'> karena tabmenunya akan kita letakkan di atas main. kalau misalnya gak ketemu sob bisa letakkan di bawah header, tinggal cari akhir tag headernya...

    BalasHapus
  14. terima kasih ilmu nya...
    mungkin bisa dibantu,dimana letak CSS..
    saya memakai blogspot

    BalasHapus
  15. sob apa yang dimaksud dengan widh >> tolong di balas !!

    BalasHapus
  16. @Ghaly Z : width itu lebar, jadi untuk menyesuaikan lebar tabmenu yang kita buat agar sama dengan tampilan blog kita, kita atur di bagian width, bisa di cek di CSS.

    BalasHapus
  17. Salam Kenal mas Mastra_yasa, saya mau nanya, code ]]> kok gak ada y, y adanya cm <![CDATA[/*
    gmn tu ??? mohon penjelasannya, thank's....

    BalasHapus
  18. @irwan,s : salam kenal sob....
    tulisan saya ini sudah lama sob.... mungkin sudah banyak yang beda sekarang di bloger. tapi intinya... kode pertam tersebut kamu simpan di bagian CSS nya.... kemudian kode kedua kamu simpan di tab body...
    tks atas kunjungannya semoga membantu

    @all : tks atas kunjungannya... maaf saya jarang update,,,,

    BalasHapus
  19. kok ga muncul kodenya kk? abis aku cari?

    BalasHapus
  20. kren ini yg w cri, langsung prakteklah,
    sekali2 tengok blog aku ya
    http://xp-w3.blogspot.com

    BalasHapus