Change Background of This Blog!


Pasang Seperti Ini
=========================Selamat Datang Di Situs Resmi Ulum Computer ====================
  • hhjjjjjjjjjjjjjjj
  • 1
  • 1
  • 1
  • 1

Kamis, 15 Maret 2012

Cara membuat menu tab view

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

Tidak ada komentar:

Posting Komentar

Welcome In Blogging Is My Life

Contoh Sliding Login Dengan JQuery

Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member

Tutorial Blog

Untuk membuatnya Silahkan : Klik Disini

Member Login

Lost your password?

Not a member yet? Sign Up!