Cara Membuat Menu Tab View

Untuk membuat menu tab view seperti diatas caranya adalah:
1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
Seperti biasa sebelum kita mengedit kode html pada blog kita biasakan selalu membackup template, untuk menjaga-jaga apabila ada kesalahan kita bisa mengembalikan template kita ke semula. caranya tinggal klik pada Download Template Lengkap.
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini 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 #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;
}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan tab view. Kita bisa mengatur lebar, tinggi, dan warna pada elemen tab view ini. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>
<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/&gt
6. Kemudian "Di save"
7. Lalu pilih ke menu,"Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan kamu letakkan Menu tab view ini.

<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 :
- Angka-angka atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview. Kamu bisa sesuaikan dengan lebar kolom tempat kamu menaruh menu tab view ini.
- Kode yang berwarna Hijau Adalah text yang akan mucul di Menu utama (Menu Atas/tab view). Ganti tulisan tab 1 , tab 2, dan tab 3 dengan judul tab yang kamu inginkan.
- Kode yang berwarna merah adalah isi dari tab view tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berwarna hijau stabilo. tambahkan menu tersebut dibawahnya.