membuat tab view

Kali ini aku akan berbagi satu lagi ilmu yang menarik yaitu membuat Menu Tab View.
Dengan menggunakan menu tab view kalian dapat meminimumkan pengunaan ruang di dalam blog kalian. Hanya memerlukan satu layout ianya dapat menampilkan beberapa informasi halaman pada tab-tab yang telah kalian buat. Kalian boleh tengok sidebar kanan bawah blog aku ini.
1) Pergi ke Layout > Edit HTML (pastikan kalian save dulu template asal)

2) Cari kode ]]></b:skin>

3) Masukkan kode di bawah sebelum ]]></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 #FFCC00; /* 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: #222; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFE16C; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #FFCC00; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFB7; /* 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;
}


p/s : kalian boleh tukar warna atau ukuran mengikuti kehendak kalian berpandukan tulisan merah pada kode tersebut.

4) Selepas itu masukkan kode di bawah sebelum</head>

<script src="http://kendhin.googlepages.com/tabview.js" type="text/javascript">
5) Save

6) Kemudian kalian pergi Layout > Add a Gadget > HTML/Javascript

7) Masukkan kod di bawah di dalam HTML/Javascript tersebut.

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

Hijau adalah untuk mengubah ukuran menu tab view mengikut kehendak kalian.

Biru adalah text yang akan tertera pada tab menu kalian

Merah adalah isi di dalam tab view kalian. Kalian boleh masukkan link di dalamnya.
Contoh google
Hanya tukarkan text yang berwarna merah saja.