Cara Bikin Tab View

00.28 ---
Cara Bikin Tab View - Sudah lama saya tidak update ya. Tutorial kali ini adalah cara bikin tab view pada blog anda, Mungkin kalian sudah tau apa itu tab view? Susah ngejelasinnya, untuk melihat demonya silahkan lihat di sini. Lumayan menarik kan? Silahkan ikuti langkah-langkahnya.

Langkah - langkahnya :

1. Login Blogger.
2. Masuk ke Design ~> Tata Letak
3. Tambah Gadget
4. Pilih HTML/Javasript
5. Masukkan kode berikut pada gadget anda.

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#00BF08; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #EF8100; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#EF8100; /*

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: 5px 5px}
</style>

<script type='text/javascript' src='http://www.geocities.ws/alprablog/user/js/tabview.js'>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul Ke-1</a>
<a>Judul Ke-2</a>
<a>Judul Ke-3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi judul Ke-1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi judul Ke-2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi judul Ke-3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

6. Simpan.

Keterangan : Anda bisa mengedit warna ukuran dan lainnya dengan sesuka hati anda.

0 komentar:

Posting Komentar