Photobucket
Terima Kasih Telah Berkunjung di BLOG - Nya Hariez

Ads [125 x 125]

Seputar Komputer | Tutorial Blog | Registry Windows | Internet | Tips Dan Trik | Template Blog | Game | Antivirus | Free 100% Download

Ads [125 x 125]

Ads [125 x 125]

Ads [125 x 125]

Ads [125 x 125]

Terimakasih sudah berkenan mampir! Jangan sungkan untuk sekedar memberikan komentar, berdiskusi atau mengikuti perkembangan info Terbaru. Saya yakin Anda juga mau dan bisa berbagi, Jika Anda merasa terbantu dengan artikel Saya silahkan tinnglkan komentar anda ataupun pesan singkat semoga saja saya bisa membantu Anda. Terima kasih dan selamat membaca! selengkapnya di http://fizzyhariez.blogspot.com

Membuat Menu Tab View

Diposting oleh Hariez Rivay Kamis, 21 Oktober 2010

Menu tab view adalah menu yang berbentuk tabel dengan pengelompokan halaman sesuai dengan tabel menu diatasnya. Menu ini banyak diapakai untuk menghemat tempat pada blog dengan sistem menampilkan atau menutupi halaman tabel sesuai dengan tabel menu diatasnya. Jadi jika kita mengklik menu diatasnya maka halaman tabel yang muncul adalah halaman tabel yang dibuat sesuai dengan menu tabel diatasnya, dan jika kita mengklik menu tabel lain maka yang muncul adalah halaman tabel yang bersesuain namun tetap pada satu tempat itu.

Coba perhatikan dibawah ini :


Gimana sudah paham belum? mau cara buatnya?

Oke kita pakai teori dari Mas Kendhin saja karena mudah dipahami.

Pertama yang harus kamu lakukan adalah Log In dan masuk menu Layout kemudian masuk bagian Edit HTML

Selanjutnya taruh code CSS dibawah ini diatas code ]]>


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;
}


Perhatikan text yang berwarna merah itu keterangan dari menu tab view yang bisa kamu edit sesuai keinginan kamu, untuk code warna bisa dilihat disini.

kalau sudah pasang script dibawah ini diatas code




Keterangan :

  1. Code yang berwarna biru diatas adalah lebar dan tinggi tabview yang bisa kamu sesuaikan.
  2. Code yang berwarna hijau adalah text judul dari menu tabel (tab 1, tab 2, tab 3 ....)
  3. Code yang berwarna merah diatas adalah halaman dari tabel yang bisa kamu pasangi code-code gagdet, gambar atau link.
  4. Dan jika ingin menambah halaman tabel perhatikan code yang berkedip, dan tambah seperti itu dibawahnya.
Kalau sudah tinggal SAVE.

Selamat Mencoba,,,!

Posting Komentar

Setiap Komentarmu Akan sangat berarti bagi blog Hariez Berbagi Ilmu Semoga Lebih Baik Untuk Kedepannya..!

Artikel Lainnya