Pasang Menu Tab View, caranya:
- Masuk ke Dashboard ,
- Pilih Layout => klik Edit HTML
- Download Full Template
- cari kode ini ]]></b:skin>
- Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin>
/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 20px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px; /* ukuran lebar menu */
text-align: center;
height: 20px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;; /* besar hurup menu */
background-color: #4c4c4c; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #FFFFFF; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#FFFFFF; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}
/* tabview css end */
- Perhatikan text-text yang berwarna Hitam, silahkan disesuaikan ya.
- Selanjutnya pasang kode berikut ini sebelum kode </head>
- Save Templates
- Selesai … untuk langkah pertama,
- masuk kemenu "Page Elements"
- Klik "Add a Gadget" , pilih "HTML/Javascript" ,
- Kemudian copy paste kode dibawah ini :
Catatan :<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;"><a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a></div>
<div class="Pages" style="width: 256px; height: 270px;">
<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>
- Angka warna hitam adalah tinggi dan lebar tab view,
- Hijau Adalah text Menu utama
- Kode yang berwarna Coklat adalah isi dari tab view
- MAU CARI KODE WARNA, SILAHKAN DISINI