Fajar Herianto

Cara membuat menu tab view Di Blogger



Cara membuat menu tab view Di Blogger.





Cara membuat menu tab view -- Triks jadul lagi yang saya bagikan kali ini yaitu bagaimana Cara membuat menu tab view pada blogspot. Fungsi atau kelebihan menggunakan menu tab view ini adalah untuk menghemat space blog sobat sehingga bisa memaksimalkan tampilan blog.

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.. 

Posting Komentar

Fajar Herianto

{facebook#https://www.facebook.com/fajarcintalia} {twitter#https://twitter.com/HeriantoFajar} {google-plus#https://plus.google.com/u/0/118173459679605761698/posts} {youtube#https://www.youtube.com/user/aplikasiterunik} {instagram#https://www.instagram.com/aplikasiterunik/}

Formulir Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.
Javascript DisablePlease Enable Javascript To See All Widget