Selasa, 20 Maret 2012

Cara membuat tab view

Cara membuat menu tab view
  1. Login ke dashboard blog kamu.
  2. Pilih Rancangan »» Edit HTML
  3. Download template lengkap dulu untuk berjaga-jaga kalau terjadi kesalahan.
  4. Beri tanda ceklist pada  Expand widget template.
  5. kemudian copy dan paste script berikut diatas ]]></b:skin>
  6. div.TabView div.Tabs { height:24px; overflow:hidden;} div.TabView div.Tabs a { float:left; display:block; width:90px; text-align:center; height:24px; padding-top:3px; vertical-align:middle; border:1px solid #ddd; border-bottom-width:0; text-decoration:none; font-family:verdana,arial,sans-serif; font-weight:bold; color:#000;} div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color:#fff;} div.TabView div.Pages {clear:both; border:1px solid #ddd; overflow:hidden; background-color:#fff;} div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden;} div.TabView div.Pages div.Page div.Pad {padding:3px 5px;}
  7. Selanjutnya copy dan paste script berikut diatas </head>
  8. <script src='http://blogtegal.googlecode.com/files/tabview.js' type='text/javascript'/> 
  9. SIMPAN
  10. Selanjutnya tambah gadget berikut. Masuk ke menu rancangan --> klik ''Tambah Gadget'' dan pilih widget ''HTML/Javascript'' dan masukan kode berikut kedalamnya:
  11. <form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width:350px;"> <a>Sub judul 1 </a> <a>Sub judul 2 </a> <a>Sub judul 3 </a> </div> <div class="Pages" style="width:350px; height:260px;"> <div class="Page"> <div class="Pad"> Link 1 di menu 1 Link 2 di menu 1 Link 3 di menu 1 </div> </div> <div class="Page"> <div class="Pad"> Link 1 di menu 2 Link 2 di menu 2 Link 3 di menu 2 </div> </div> <div class="Page"> <div class="Pad"> Link 1 di menu 3 Link 2 di menu 3 Link 3 di menu 3 </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize ('TabView'); </script>
  12. SIMPAN.
Selamat mencoba Cara membuat menu tab view, semoga berhasil..  

Tidak ada komentar:

Posting Komentar