Membuat tap view menu tanpa Edit HTML

Tuesday, March 22, 2011

Membuat tap view menu tanpa Edit HTML

ebelumnya sudah pernah saya bahas tentang cara membuat tap view menu , Sekarang saya akan mengajak anda untuk membuat tap view 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>