Membuat Tab Menu

Oya sobat siapa yng di blognya punya link banyak or judul posting yang buanyak tapi bingung naruknya, sekarang g' usah repot" deh kan dah ada Tab Menu View dengan kotak yang kecil bisa menampung isi yang banyak lho..... n' Trik kali ini aku dapet dari blognya Mas Kendhin tapi di blognya O-om juga ada so thanks banget buat mas kendhin.


Oke.. oke langsung aja ikuti Cara dari ku ini:

Ett... sebentar yang belum tau Tab Menu View tu kayak pa nech... contohnya:



1. Login ke blogger truzzz pilih menu "Layout --> Edit HTML"

2. Kemudian cari kode ini ]]></b:skin>



3. And then copy kode berikut ini sebelum kode ]]></b:skin> atau kedalam deretan tag CSS sobat.

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. Perhatikan text-text yang dicetak tebal, itu adalah keterangan yang ada di Tab View. Ada ukuran dan warna dll. Sobat bisa menyesuaikan dengan blog sobat.

5. Langkah berikutnya copy kode berikut ini sebelum kode </head>

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

6. Kemudian " save"

7. Truzz pilih "Page Elements"

8. Trus Pilih "Add a Gadget" --> "HTML/Javascript" utnuk meletakkan Tab Menu View ini.

9. Copy script ini kedalam nya:

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

- Ttext yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.

- Kode yang berwarna Hijau text yang muncul di Menu utama (Menu Atas).

- Kode yang berwarna merah adalah isi dari tabvie. Kamu bisa mengisinya dengan link, gambar, banner, script dll.