5 Tips Membuat Menu Tab View

Masih banyak orang yang belum tau gimana membuat Menu Horizontal Tab View seperti pada gambar disamping, umumnya orang-orang pengguna blog memanfaatkan fasilitas yang ada pada template gratisan atau ada juga yang berbayar. Nah bagi anda yang punya blog masih biasa-biasa saja namun ingin membuat tampilan Menu Tab View tersebut, disini akan saya coba untuk memberitahukan gimana cara membuatnya secara manual..

Bagi yang belum paham juga, coba perhatikan gambar diatas, dan liat langsung contohnya diblog percobaan saya disini


Berikut cara membuatnya:
1. Masuk ke akun blogger anda
2. Pilih menu "Rancangan --> Edit HTML"
3. Centang dulu pada kotak "Expand Template Widget"
4. Cari kode ini ]]></b:skin>
5. Kemudian masukkan kode berikut ini sebelum kode diatas:

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

6. Perhatikan text-text yang berwarna merah diatas, itu merupakan keterangan untuk pengaturan Tab View. Untuk mengetahui kode2 warna silahkan lihat DISINI
7. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

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

Terus di Save.

Lanjutnya:
1. Buka Rancangan >> Elemen Laman
2. PIlih "Tambah Gadget" --> "HTML/Javascript" letakkan dimana mau kamu pasangkan Manu Tab View ini.
3. Masukkan Kode berikut pada Gadget diatas:

<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 :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.