Cara Buat View Tab Menu

apa itu View Tab Menu ? view tab menu menurut klinik-it adalah menu yang memiliki beberapa tempat untuk menampatkan menu pada sebuah kategori dalam satu tempat,..Contohnya bisa sobat klik disini. Kalo sobat udah ngeliat apa yang di sebut View Tab Menu sedikit lagi klinik-it jelaskan keuntungan memasang View Tab Menu ,keuntungan dari View Tab Menu itu sendiri adalah untuk menghemat tempat menaruh daftar-daftar menu blog kita. jadi walawpun kecil View Tab Menu ini sangat berguna sekali untuk menaruh menu-menu yang cukup banyak. nahh... biar lebih jelas kaya gini nich tampilanya..



Dari segi kegunaanya sobat mungkin perlu mebuat View Tab Menu ini .dan jika sobat tertarik, sobat bisa membuat View Tab Menu tersebut dengan mengikunti langkah-langkah
Cara Buat View Tab Menu di bawah ini.

Cara Buat View Tab Menu

1.Login ke Blogger.

2.Klik Tata Letak.

3.Klik Edit HTML.

4.Selanjutnya Copy kode di bawah ini kemudian paste Kode tersebut di atas kode ]]></b:skin>.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #fffafa;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #fffafa;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

5.Kemudian Copy dan paste kode berikut di atas kode </head>.

<script src='http://denisahlan.googlecode.com/files/tabview.js' type='text/javascript'/>

6.Klik Simpan Template.

7.Selanjutnya klik Tata letak.

8.Klik lagi Element Halaman.

9.Klik Tambah Gadget.

10.Pilih HTML/javascript.

11.Kemudian Copy dan paste Code berikut ke dalamnya.

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

<div class="Page">
<div class="Pad">
<a href="Link menu">Nama menu</a> <br />
<a href="Link menu">Nama menu</a> <br />
<a href="Link menu">Nama menu</a> <br />
</div>
</div>

<div class="Page">
<div class="Pad">
<a href="Link menu">Nama menu</a> <br />
<a href="Link menu">Nama menu</a> <br />
<a href="Link menu">Nama menu</a><br />
</div>
</div>

<div class="Page">
<div class="Pad">
<a href="Link menu">Nama menu</a> <br />
<a href="Link menu">Nama menu</a> <br />
<a href="Link menu">Nama menu</a> <br />
</div>
</div>

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

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

12.Ubah Tulisan yang berwarna hijau dengan tulisan keinginan sobat misalnya "tutorial blog" menu tersebut adalah menu pada tab.Kemudian ubah tulisan yang berwarna biru dengan link menu pada blog sobat. dan ubah tulisan yang berwarna merah dengan tulisan dari link yang berwarna biru tadi.

Kalo mau di tambahin menu nya tinggal taro kode <a href="Link menu">Nama menu</a> <br /> .

13.Klik SIMPAN.

14.Selesai...