Cara Membuat Menu Tab View

Apa itu menu tab view? Menu tab view adalah menu yang terdapat banyak tab, dan jika kita mengklik masing-masing tab yang terdapat dalam menu tab view tersebut, maka yang akan muncul adalah gadget yang berbeda alias tidak sama (walaupun aslinya semua menu yang tersedia terletak di dalam gadget yang sama). Jadi kegunaannya juga hitung-hitung buat menghemat tempat gadget blog, dari pada letaknya berhamburan maka dengan gadget menu tab view ini teman-teman bisa mengelompokkan menu sesuka teman-teman.

agar tidak sekedar kata-kata, teman-teman bisa melihat contoh tampilan berikut:


Jika anda mengklik menu Banner Blog, maka yang muncul:
























Ketika anda mengklik menu Tutorial Blogger, maka yang muncul:























Dan ketika mengklik Buku Tamu, maka yang muncul:


























Bagaimana teman-teman, tertarik untuk membuat menu di atas? Jika tertarik maka langkah-langkahnya adalah sebagai berikut:

1. Login ke blogger >> Tata Letak >> Edit HTML

2. Letakkan kode berikut sebelum 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: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Keterangan:

Warna= Lebar Menu Utama Atas
Warna= Tinggi Menu Utama Atas
Warna= Warna Border Menu Atas
Warna= Jenis Font Menu Utama Atas
Warna= Gd Font
Warna= Warna Font Menu Utama Atas
Warna= Warna BackGround Menu Utama Atas
Warna= Warna Border Kotak Utama
Warna= Warna BackGround Kotak Utama


Tips: Silahkan cari warna di Kumpulan Kode Warna.






3. Selanjutnya letakkan kode berikut sebelum kode </head>

<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_buat_tabview.js' type='text/javascript'/>

4. Klik tombol simpan template. Sekarang untuk langkah mengotak atik kode template sudah selesai.


5. Selanjutnya adalah tahap terakhir, yaitu menambah kode menu tab view ke dalam gadget HTML.

Pergi ke Tata Letak >> Tambah Gadget >> HTML, dan isikan kode berikut:

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

Warna= Silahkan untuk menyesuaikan ukurannya dengan blog anda.
Warna= Itu adalah nama menu utama, lihat gambar di atas. Di sana terdapat Banner Blog, Tutorial Blogger, dan Buku Tamu.
Warna= Adalah tempat di mana anda bisa mengisi kata-kata, gambar (kode gambar), serta script lainnya. Contoh (lihat gambar di atas): Ada banner blog ini, Kumpulan tutorial, serta tampilan shout box alias buku tamu.^







6. Simpan hasil kerjaan anda.








Bagaimana teman-teman, baguskan? Selamat mencoba...

Oh iya, kunci keberhasilan adalah berani mencoba!






Semoga Bermanfaat []

Tags: cara memasang menu tab view, menu tab view untuk blogger, kode html untuk blog blogger, kode script untuk blogger, cara mudah membuat menu tab view