menu tab view

Menu tab view adalah menu yang berbentuk tabel bersusun kebawah yang menunya sesuai dengan tabel menu diatasnya,sistim tabview ini banyuak dipergunakan oleh para blogger untuk mrngurangi pemakain halam blog,cara pemakainnya persis seperti menu horizontal bercabang setiap kita klik tabel menunya maka akan muncul sub menunya oke bro mari kita langsung ke tkp,namun saya sarankan agar dalam pembuatan tab view ini agan harus hati2 karena scriptnya teramat sensitif dan agak ribet, oke gan mari kita simak langkah-demi langkahnya

Seperti biasa kamu harus login dulu ke akun kamu setelah kamu login ke akun kamu,kemudian kamu masuk ke menu LAYOUT kemudian masuk ke bagian EDIT HTML

kemudian copas kode css yang dibawah ini di atas kode ]]</b:skin>

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: 1px solid #000; /* 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: #000; /* Warna Font Menu Utama Atas */ } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #FF9900; /* Warna background Menu Utama Atas */ } div.TabView div.Pages { clear: both; border: 1px solid #6E6E6E; /* Warna border Kotak Utama */ overflow: hidden; background-color: #FF9900; /* Warna background Kotak Utama */ } div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; }

setelah itu copas lagi script dibawah ini di atas kode </head>

Setelah itu save template anda

kemudian masuk bagian "Layout -> Page Elements, lalu cari tempat gadgetnya kemudian klik Add new gadget kemudian pilih HTML/JavaScript dan taruh Code dibawah ini :

<form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width: 350px;"><b style='green'> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></b> </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

tulisan width: 350px & height:250px diatas adalah lebar dan tinggi tabview yang bisa kamu sesuaikan.

kode <a> Tab 1 </a>...adalah text judul dari menu tabel (tab 1, tab 2, tab 3 ....)

Code tulisan Tab 1.1 <br/> diatas adalah halaman dari tabel yang bisa kamu pasangi code-code gagdet, gambar atau link.

Oke bro demikianlah ulasan kita tentang cara membuat tab view,selamat mencoba dan semoga berhasil...