kali ini saya akan mengulas dan membahas bagaimana caranya membuat Tab View secara manual dengan kreasi kita sendiri. adapun perbedaan antara manual dan otomatis yaitu jika otomatis maka sudah ditentukan menu apa yang muncul pada tab view yang kita buat, akan tetapi jika kita membuatnya secara manual, maka tentu kita pula yang akan menentukan isi dari tab view yang kita buat.
Adapun cara membuat tab view secara manual yaitu:
1. Silahkan Sobat cari kode ini ]]></b:skin>
2. Kemudian copy kode di bawah dan pastekan tepat di atas kode ]]></b:skin>
| div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 105px; /* Lebar Menu Utama Atas */
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
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: #7EF5F7; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #ffffff; /* 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: 3px 5px;
}
|
3. Kemudian Silahkan sobat cari kode </head>, kemudian Copy Kode di bawah ini dan Pastekan kode tersebut di atas koden </head>
| <script type='text/javascript'> //<![CDATA[ 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); } //]]> </script> |
4. Setelah itu klik SAVE TEMPLATE
5. Kemudian pada langkah terakhir yaitu tinggal menambahkan kode untuk tab viewnya. caranya yaitu:
- Masuk ke Rancangan/Desaign
- Kemudian Pilih tambag gadget/widget
- Kemudian Tambah html/javascript
- Setelah itu pastekan kode di bawah ini setelah sobat copy
| <form action="tabview.html" method="get"> <div class="TabView" id="TabView"> <div class="Tabs" style="width: 310px;"> <a>isi judul pertama</a> <a>isi judul kedua</a> <a>isi judul ketiga</a> </div> <div class="Pages" style="width: 245px; height: 250px;"> <div class="Page"> <div class="Pad"> isi menu 1<br/> </div> </div> <div class="Page"> <div class="Pad"> isi menu 2<br /> <br /> </div> </div> <div class="Page"> <div class="Pad"> isi menu 3<br /> <br /> <br /> </div> </div> </div> </div> </form> <script type="text/javascript"> tabview_initialize('TabView'); </script> |
- Setelah itu Klik SAVE
KET:
<br /> adalah pengaturan jarak
<a>isi judul pertama</a> merupakan judul yang mau di isikan