cara membuat tabview 4

Sobat, kali ini masih membahas cara membuat tabview. Kalo tidak salah di blog ini sudah ada 3 posting tentang tabview, tapi tentunya dengan gaya yang berbeda-beda. Pada tabview terdahulu saya merasa kesulitan untuk menambahkan judul tab yang baru, karena setiap menambah judul tab baru selalu saja judul tab yang sudah ada hilang beserta isinya, dan judul yang baru tampil berantakan. Nah kali ini ga bakalan terjadi hal demikian karena yang akan kita bahas di bawah ini lebih fleksibel... ini dia langkahnya:

Login ke Blog
Klik Tab Tata Letak
Klik Tab Edit HTML
Beri tanda centang pada kotak kecil Expand Template Widget
5. Silahkan cari di dalam template anda kode </head> kopi kode ini di atasnya
   
   function tabview_aux(TabViewId, id) { var TabView = document.getElementById(TabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if (Tab.tagName == "A") { i++; Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");"; Tab.className = (i == id) ? "Active" : ""; Tab.blur(); } } while (Tab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while (Pages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if (Page.className == 'Page') { i++; if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = (i == id) ? 'block' : 'none'; } } while (Page = Page.nextSibling); } // ----- Functions ------------------------------------------------------------- function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); } function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
6. Cari lagi di dalam template anda kode ]]></b:skin> kopi kode berikut di atasnya
   
   div.TabView div.Tabs { width: 100%; overflow: hidden; border-bottom: 0px solid #000000; font: bold 13px Arial; list-style-type: none; } div.TabView div.Tabs a { float: left; display: block; text-decoration: none; margin-right: 2px; margin-bottom: 2px; padding: 3px 3px 3px 3px; color: #FFFFFF; background: #0B615E; } div.TabView div.Tabs a:hover { color: #000000; background:#DF0101; } div.TabView div.Tabs a.Active { color: #000000; background:#2E2EFE; } div.TabView div.Pages { width: 100%; overflow: hidden; clear: both; border: 0px solid #E6E6E6; margin: 25px 0px 5px 5px; padding: 0px 0px 0px 0px; } div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 0px 0px; }
7. simpan template
8. masuk ke tataletak, tambahkan gadget html baru kopi kode berikut
   
   <div style="overflow:auto; width:100%px; height:100%px; padding:5px 5px 5px 5px; border:1px solid #999999;"><form action="tabview.html" method="get"><div id="TabView" class="TabView"><div style="width: 100%;" class="Tabs"><a>Judul 1</a> <a>Judul 2</a> <a>Judul 3</a> <a>Judul 4</a> </div><div style="width: 100%; height: 250px;" class="Pages"><div class="Page"><div class="Pad"> masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 1 </div></div><div class="Page"><div class="Pad"> masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 2 </div></div><div class="Page"><div class="Pad"> masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 3 </div></div><div class="Page"><div class="Pad">masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul 4 </div></div></div></div></form><script type="text/javascript"> tabview_initialize('TabView'); </script> </div>
9. simpan
10. jika ingin menambah judul tambahkan
    
    <a>Judul xx</a> dan <div class="Page"><div class="Pad">masukkanlah semua data dari judul disini yangnanti akan tampil di kolom Judul xx </div></div>
11. selamat mencoba

Tulisan Terkait :

Best Quote Today:
Keberhasilan adalah kemampuan untuk melewati dan mengatasi dari satu kegagalan ke kegagalan berikutnya tanpa kehilangan semangat. (Winston Chuchill)

Jika Anda menyukai tulisan diatas jangan lupa untuk klik tombol suka untuk berbagi dengan teman facebook Anda. Anda juga bisa membagikan tulisan ini di twitter dan jejaring sosial lainnya. Berbagi itu indah.

Become a Fan