Membuat Menu Tab View

Menu tabview 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 menuLayout
kemudian masuk bagian Edit HTML

Selanjutnya taruh code CSS dibawah ini diatas code ]]></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;
}

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 </head>

<script src='http://anas.ku93.googlepages.com/tabview.js'
type='text/javascript'/>

kalu sudah silahkan "Save Template" Anda.

kemudian masuk bagian "Layout -> Page Elements, lalu cari tempat gadgetnya kemudian klikAdd 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;">

<a>Tab
1</a>

<a>Tab
2</a>

<a>Tab
3</a>

</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 :

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.

Sumber: http://www.informasiku.com/