Chyberart - Sebelumnya sudah pernah
saya bahas tentang cara membuat tap view menu , Sekarang saya akan
mengajak anda untuk membuat tap v
iew menu dengan cara yang berbeda dan
pastinya lebih mudah. Fungsi tap view menu silahkan klik Disini,
karana saya tidak akan menjelakannya pada tutorial kali ini. Tap view
menu yang akan anda buat kali ini tidak perlu melakukan Edit HTML pada
template blog anda, dengan demikian kesalahan yang terjadi sangat kecil.
Nah
untuk anda yang belum berhasil membuat tap view menu pada tutorial
sebelumnya, Tutorial kali ini bisa anda jadikan alternatif untuk membuat
tap view menu pada blog anda. Langkah-langkahnya adalah sebagai berikut
:
- Log-in ke blog anda
- Pilih Rancangan >Edit HTML >Tambah gadget
- Tambahkan HTML/JavaScript
- Copas kode berikut kedalam Box HTML/Javascript
<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:#000; /* 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: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* 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 src="http://aldi7.googlecode.com/files/tapmenuview.js" type="text/javascript"></script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
Isi menu tab view 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab view 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Keterangan :
- Kode warna Biru adalah Judul menu-menu tap view anda
- kode warna merah adalah Isi/sub-sub menu
- Kilk simpan dan selesai
Gimana....?, cara kali ini lebih mudah dan simpel bukan!. Jangan lupa kritik dan sarannya ya!
-----> Selamat mencoba dan terimakasih <-----