Karena sering ditanya tentang bagaimana caranya membuat Tab VIew (Biasanya
nanyanya gini: "Mas cara membuat menu yg kayak punya mas gmn? yg ada "Tips & Trik",
"Lain-lain", "Terbaru", "Komentar" itu lho). Ya kan? hayo ngaku... Tabview itu sangat berguna
sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak.
Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya sulit jadi
belum bisa aku jelaskan. Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara
yang ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda. Dan aku dapet script ini
juga bukan dari o-om lho :D
Tab view itu contohnya seperti ini :
4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View.
Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>
<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link,
gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu
tersebut dibawahnya.