Membuat Menu Tab View

Yo..

Kali ini aku nak kongsikan satu lagi ilmu yang menarik iaitu membuat Menu Tab View.
Dengan menggunakan menu tab view korang dapat meminimumkan pengunaan ruang di dalam blog korang. Hanya memerlukan satu layout ianya dapat menampilkan beberapa informasi halaman pada tab-tab yang telah korang buat. Korang boleh tengok sidebar kanan blog aku ini.

Jom godek...

1) Pergi ke Layout > Edit HTML (pastikan korang save dulu template asal)

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

3) Masukkan kod 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 : korang boleh tukar warna atau saiz mengikut kehendak korang berpandukan tulisan merah pada kod tersebut.

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

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

5) Save

6) Kemudian korang 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 saiz menu tab view mengikut kehendak korang.

Biru adalah text yang akan tertera pada tab menu korang

Merah adalah isi di dalam tab view korang. Korang boleh masukkan link di dalamnya.
Contoh <a href="http://www.google.com">google</a>
Hanya tukarkan text yang berwarna merah saja.

Ok.. Enjoy..