tab view

aku dah lama nak buat tab view...aku dah pernah buat sblm ni..tapi xtau la knp berat sgt..kalau korang nak cuba2 pakai...ni aku bagi tutorial..aku xdak gambar sendiri...gambar ni pon ok kan..

cara2:

1. Login ke blogger --> "Layout --> Edit HTML"
2. Cari kod ini ]]></b:skin>
3. Masukkan kod kat bawah ni sebelum kode ]]></b:skin> atau kedalam tag CSS.

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

4. tengok la text yang kaler merah ...tu untuk aturkan tab view. dah tulis tu..faham2 la ye..hehe..kalau nak buang pon xpa..x effect pon..
5. pasang kod kat bawah ni sebelum kod </head>

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

6. pastu save
7. peri ke "Page Elements"
8.Pilih"Add a Gadget" --> "HTML/Javascript" ..kat tmpat yang korang nak letak benda alah ni.
9. kat bawah ni script yg korang kena masukkan:

<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. Nombor2 atau tulisan yang berwarna biru (350px) = ukuran tinggi dan lebar tabview.
2. Kod yang berwarna Hijau = tulisan untuk Menu utama (Menu Atas).
3. Kod yang berwarna merah = isi dari tabvie tsb. Korang masukkanla link sendiri samada link, gambar, banner, script dll.
4. Kalau nak tambah menu tengokla tulisan yang berkelip2 tu. tambahlah menu kat bawha dia.
   
5. tlisan yang berkelip2 atas tu..yang pertama tu untuk menu dia..yang berkelip2 kedua untuk isi dia...pastikan baca kod dengan betul..

selamat berjaya..