cara membuat tab view

yang buat toturial, cara membuat tab view sebenarnya sudah banyak, saya hanya sekedar menambahkan, pembuatannya juga agak berbeda, berikut cara membuat tab view, sedangkan contohnya bisa di lihat di blog percobaanku indam-bontang.blogspot.com

• log in
• tata letak/layout
• tambah gadget/add a gadget
• HTML/java script
• copy script berikut

• <style tipe="text/css"> div.TabView div.Tabs { height: 24px; overflow: hidden; } div.TabView div.Tabs a { float: left; display: block; width: 90px; /* Lebar Menu Utama Atas */ text-align: center; height: 24px; /* Tinggi Menu Utama Atas */ padding-top: 3px; vertical-align: middle; border: 2px solid #ffff00; /* warna border menu atas */ border-bottom-width: 0; text-decoration: none; font-family: "Times New Roman", Serif; /* font menu utama atas */ font-weight: 900; color: #000000; /* warna font menu utama atas */ } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #00ff00; /* warna background menu atas ketika cursor melintas */ } div.TabView div.Pages { clear: both; border: 2px solid #33ffff; /* warna border kotak utama */ overflow: hidden; background-color: #ccffcc; /* Warna background Kotak Utama */ } div.TabView div.Pages div.Page { height: 100%; padding: 0px 0px; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px ; } </style> <script src="http://sites.google.com/site/indamwhy/file-java-script/tabview.js" type="text/javascript"></script> <form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div style="width: 330px;" class="Tabs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a> </div> <div style="width: 310px; height: 240px;" class="Pages"> <div class="Page"> <div class="Pad"> (masukkan script/kode kalian disini untuk isi tab 1) </div> </div> <div class="Page"> <div class="Pad"> (masukkan script/kode kalian disini untuk isi tab 2) </div> </div> <div class="Page"> <div class="Pad"> (masukkan script kode kalian disini untuk isi tab 3) </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script>

• kemudian paste di colom content, nah, sebelum disimpan, baca keterang berikut;

ket*;

• text yang di cetak tebal adalah pengaturan warna dan font kotak "tab view"
• hapus text yang berwarna, merah, kuning, hijau, kemudian ganti textnya dan masukkan, script/kode kalian, misal, buku tamu(shoutmix,cbox), badge (twitter, facebook, friendster), recent post, recent coment, dan lain sebagainya;

semoga bermanfaat.

Ditulis oleh intheamwhy pada Sabtu, Oktober 10, 2009