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
menu Layout 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 klik Add
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.

Kalau sudah tinggal SAVE

Admin

Endro Prasiswo
tel.:081334169022
fax:03423326622
Email:admin@kesamben.co.cc
URL:http://www.obralilmu.co.cc
Facebook:http://www.facebook.com/endro.prasiswo