1. Tambahkan widget HTML/Javascript dan letakkan dimana tempat tebwiew yang jagoan kehendaki
2. Copi dan pastekan kode dibawah ini pada widget HTML yang udah jagoan buat sebelumnya.
Gati kode yg berwarna merah dan hijau dengan yg anda ingin kan......
<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs
{background-color: #ffffff; /* Warna background Menu Utama Atas */ }
div.TabView div.Tabs a {float:left; display:block; width: 86.5px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:0px; vertical-align:middle; border:3px solid #000000; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Courier", Serif; /* Jenis Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #B22222; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:3px solid #000000; /* Warna border Kotak Utama */ overflow:hidden; background-color:#000000; /* 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: 5px 5px}
</style>
<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>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 280px;" class="Tabs">
<a>Nama tabview 1</a>
<a>Nama tabvier 2</a>
<a>Nama tabview 3</a>
</div>
<div style="width:273px; height:400px; " class="Pages">
<div class="Page">
<div class="Pad">
Masukkan kode widget untuk tabview 1 di sini
</div>
</div>
<div class="Page">
<div class="Pad">
Masukkan kode widget untuk tabview 2 di sini
</div>
</div>
<div class="Page">
<div class="Pad">
Masukkan kode widget untuk tabview 3 di sini
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
0 komentar:
Posting Komentar