Menu Tab View ~ banyak sekali diluar sana versi dari menu tab view ini, prinsipnya sih sama ajah, agar tampilan blog terlihat lebih profesional...gituh kalih.....ya gitu deh(kalau dijelasin bakal boring, mendingan liat contohnya di"statistik"....udah terlihat
Pasang Menu Tab View, caranya:
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
