Tab View Menu Tanpa Edit HTML

Di tutorial ini saya akan bahas tentang cara membuat Tab View Menu Tanpa Edit HTML.Intinya kita membuat tabview tidak perlu ribet dengan mencari-cari kode html.tapi di tutorial kali ini cara nya sangatlah simple yaitu sama dengan kita menambahkan gedget seperti biasa.
Langkah-Langkah untuk membuat tab view menu tanpa edit HTML adalah sebagai berikut :
1. Log-in ke blog Anda
2. Pilih Rancangan >Edit HTML >Tambah Gadget
3. Tambahnkan HTML/JavaScript
4. Copy Paste kode dibawah ini ke dalam 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 wana merah adalah judul menu tab view Anda. 

● kode warna biru adalah isi atau sub-sub menu Anda. 

5. Klik simpan dan Selesai,