0 Membuat tap view menu tanpa Edit HTML

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

1. Log-in ke blog anda
2. Pilih Rancangan >Edit HTML >Tambah gadget

3. Tambahkan HTML/JavaScript

4. 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
5. Kilk simpan dan selesai

Gimana....?, cara kali ini lebih mudah dan simpel bukan!. Jangan lupa kritik dan sarannya ya!

-----> Selamat mencoba dan terimakasih <-----

Anda sedang membaca artikel tentang Membuat tap view menu tanpa Edit HTML dan anda bisa menemukan artikel Membuat tap view menu tanpa Edit HTML ini dengan url https://team-cyberart.blogspot.com/2012/04/membuat-tap-view-menu-tanpa-edit-html.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat tap view menu tanpa Edit HTML ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Membuat tap view menu tanpa Edit HTML sumbernya.