Menu Tab View biasa digunakan oleh para blogger yang ingin menghemat space pada halaman webnya. Berikut ini merupakan salah satu tutorial sederhana yang juga banyak di share oleh para blogger di blog mereka.











Tutorial Membuat Menu Tab View :

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

2. Cari kode berikut ( Tekan CTRL+F untuk mempermudah pencarian) ]]>

3. Kemudian masukkan kode berikut ini sebelum kode ]]> atau ke dalam tag CSS.

Code:

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;

***Text berwarna merah merupakan keterangan untuk melakukan editing menu tab view sesuai keinginan Anda.( Bisa Dihapus)***





5. Step selanjutnya yaitu memasang kode berikut ini sebelum kode

Code :

  





6. Save









=========================
Next Step ==>
=========================


1. Cari menu Element yang terdapat pada blog

2. Pilih menu "Add a Gadget" --> "HTML/Javascript" (tata letak bisa disesuaikan)

3. Masukan script berikut :


Code :

 

Tab 1
Tab 2
Tab 3

Tab 1.1

Tab 1.2

Tab 1.3

Tab 2.1

Tab 2.2

Tab 2.3

Tab 3.1

Tab 3.2

Tab 3.3

Keterangan tambahan :

1. Code:

untuk mengatur lebar dan panjang kolom

2. Code:

Tab 1 Tab 2 Tab 3

Merupakan Menu Utama

3. Code:

Tab 3.1 Tab 3.2 Tab 3.3

Merupakan isi dari tav view yang bisa ditambahkan dengan link, gambar, dsb.
 
http://mr-amateur46.blogspot.com/2011/12/menu-tab-view-biasa-digunakan-oleh-para.html