MEMBUAT TAB VIEW 0

Muhamad Haidir Ali | 20.05 | ,

http://www.geocities.com/q_mistique/tabview.jpg

tab view seperti di atas dapat di pasang di blog anda sendiri... berikut cara - caranya :

  1. copy code di bawah ini :
    <style type="text/css"><br />div.TabTampil div.TTs<br />{height: 24px; overflow: hidden; }<br />div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active<br />{ background-color: #77d0ee; }<br />div.TabTampil div.Halamans<br />{ clear: both; border: 1px solid #0199cb; overflow: hidden; background-color: #ffffff;}<br />div.TabTampil div.Halamans div.Halaman<br />{ height: 100%; padding: 0px; overflow: hidden; }<br />div.TabTampil div.Halamans div.Halaman div.Alas<br />{ padding: 3px 5px; }<br />div.TabTampil div.TTs a<br />{ border-left:1px solid #0199cb; border-right:1px solid #0199cb; border-top:1px solid #0199cb; border-bottom:0px solid #0199cb; float: left;<br />display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;<br />font-size: 12px; font-weight: 900; color: #222}<br /></style>


    <form action="tabtampil.html" method="get">
    <div id="TabTampil" class="TabTampil">
    <div style="width: 370px;" class="TTs"> <a>nama tab 1</a> <a>nama tab 2</a> <a>nama tab 3</a></div>
    <div style="width: 350px; height: 300px;" class="Halamans">
    <div class="Halaman">
    <div class="Alas">
    ISI TAB 1
    ISI TAB 1
    ISI TAB 1
    </div>
    </div>


    <div class="Halaman">
    <div class="Alas">
    ISI TAB 2
    ISI TAB 2
    ISI TAB 2
    </div>
    </div>


    <div class="Halaman">
    <div class="Alas">
    ISI TAB 3
    ISI TAB 3
    ISI TAB 3
    </div>


    </div>
    </div>

    </div></form>
  2. buat sebuah elemen html/javascript bari
  3. paste code yang sudah di copy tadi
  4. simpan
selesai.....

keterangan :

kode merah => boleh di ganti
kode biru => harus diganti

Baca Juga Artikel Terkait



0 Responses So Far:

 
Related Posts Plugin for WordPress, Blogger...