Cara Membuat Menu Tab View

Karena sering ditanya tentang bagaimana caranya

membuat Tab VIew (Biasanya nanyanya gini: "Mas cara
membuat menu yg kayak punya mas gmn? yg ada "Tips &
Trik", "Lain-lain", "Terbaru", "Komentar" itu lho). Ya kan?
hayo ngaku... Tabview itu sangat berguna sekali, karena
dengan ukuran kotak yang relatif kecil tapi bisa memuat isi
yang buanyak. Sebenarnya dah dari dulu pingin posting
tentang itu, tp karena yg dulu cara pasanganya sulit jadi
belum bisa aku jelaskan. Trus akhirnya aku menemukan
metode baru dalam pembuatannya. Cara yang ini mungkin
mirip dengan punyanya o-om, tp scriptnya agak beda. Dan
aku dapet script ini juga bukan dari o-om lho :D
Tab view itu contohnya seperti ini :

Beginilah cara untuk membuat menu tab view tersebut

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

HTML"
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 #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 berwarna merah, itu adalah

keterangan untuk pengaturan Tab View. Ada ukuran warna
dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini
sebelum kode </head>

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

6. Kemudian "Di save"

7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di
tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

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