logo
Ganti kemasan produk Anda dengan Kemasan berbahan dasar bambu ramah lingkungan...dimensi bisa request. Lihat GRATIS di DAFTAR HARGA KEMASAN BAMBU

Cara Pasang Menu Tab View

www.desacilembu.com
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:
  • 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,
Langkah ke (2) dua 
  • masuk kemenu "Page Elements"
  • Klik  "Add a Gadget" ,  pilih "HTML/Javascript"  ,
  • Kemudian copy paste kode dibawah ini :
<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>
Catatan :
  • 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

Enter your email address to get update from DESA CILEMBU.
Print PDF
ARTIKEL TERKAIT : data-matched-content-rows-num="4,2" data-matched-content-columns-num="1,4" data-matched-content-ui-type="image_stacked" data-ad-format="autorelaxed">
Tulisanmu ingin dibayar? Kirim artikelmu ke: troyalfawaz@gmail.com
NOTES: Jika Kolom Komentar Nggak Terbuka, Harap Muat Ulang Halaman ini
Next
« Prev Post
Previous
Next Post »
Copyright © 2008 - DESA CILEMBU | Privacy Policy | Disclaimer | About | DMCA.com Protection Status | Created by Kompi ajaib - Powered by Blogger