Cara Membuat Tab Menu Horizontal

Sewaktu kita mengunjungi Website/Blog, seringkali kita melihat ada tab menu horizontal pada header nya.
Fungsi tab menu ini sangat diperlukan, karena tabmenu ini bisa memudahkan kita masuk ke URL - URL situs kita.

Sedangkan cara untuk membuat tab menu tersebut adalah sebagai berikut :
1. Masuk ke menu Layout (Tata Letak).
2. Pilih tab Edit HTML.
3. Cari kode (Ctrl + F)
]]></b:skin>

4. Masukkan kode di bawah ini sebelum kode ]]></b:skin> :

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Tab Menu*/ text-align: center;
height: 24px; /* Tinggi Tab Menu*/
padding-top: 3px;
vertical-align: middle;
border: 1px solid #FFCC00; /* Warna Garis Tepi Menu*/
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Huruf Tab Menu*/
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 Tab Menu Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #FFCC00; /* Warna Garis 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;
}

Kamu bisa mengubah warna - warna nya sesukamu.

5. Copy kan kode dibawah ini, dan letakkan sebelum kode </head>

&ltscript src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>

6. Simpan.

7. Masuk ke menu Page Element.

8. Klik Add Gadget kemudian pilih HTML/Java Script, Tempatkan pada lokasi yang akan kamu pilih sebagai tempat menu tab ini. Kemudian isikan script dibawah ini :

<form action=&quolt;tabview.html&quolt; method=&quolt;get&quolt;>
<div class=&quolt;TabView&quolt; id=&quolt;TabView&quolt;>
<div class=&quolt;Tabs&quolt; style=&quolt;width: 350px;&quolt;>
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class=&quolt;Pages&quolt; style=&quolt;width: 350px; height: 250px;&quolt;>

<div class=&quolt;Page&quolt;>
<div class=&quolt;Pad&quolt;>
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class=&quolt;Page&quolt;>
<div class=&quolt;Pad&quolt;>
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class=&quolt;Page&quolt;>
<div class=&quolt;Pad&quolt;>
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type=&quolt;text/javascript&quolt;>
tabview_initialize('TabView');
</script>

* Teks yang berwarna merah adalah Tinggi dan lebar tab menu.
* Teks yang berwarna biru adalah Teks yang akan muncul pada menu tab.
* Teks yang berwarna kuning adalah Teks yang muncul pada sub menu.