Membuat menu tab view

MEMBUAT MENU TAB VIEW

Lihat gambar di atas, itulah menu tab view....

Sobat ingin membuatnya, langsung saja ikuti langkah-langkahnya :

1. Masuk ke bolger sobat.

2. Pilih rancangan, trus edit html.

3. Cari kode ]]></b:skin>

4. Masukan kode ini diatas kode no.3

div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 90px; /* Lebar Menu Utama Atas */ text-align: center;

height: 24px; /* Tinggi Menu Utama Atas */

padding-top: 3px;

vertical-align: middle;

border: 1px solid #000; /* Warna border Menu Atas */

border-bottom-width: 0;

text-decoration: none;

font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */

font-weight: 900;

color: #000; /* Warna Font Menu Utama Atas */

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #FF9900; /* Warna background Menu Utama Atas */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #6E6E6E; /* Warna border Kotak Utama */

overflow: hidden;

background-color: #FF9900; /* 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;

}

5. Kemudian cari kode </head>

6. Masukan kode ini di di atas kode no.5

<script type='text/javascript'>

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>

7. Lalu save

8. Pilih edit laman

9. lalu tambah gadget dan pilih html/javascript

10. Masukan scrip di bawah ini :

<form action="tabview.html" method="get">

<div class="TabView" id="TabView">

<div class="Tabs" style="width: 350px;">

<a>Tab 1</a>

<a>Tab 2</a>

<a>Tab 3</a>

</div>

<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">

<div class="Pad">

Tab 1.1 <br />

Tab 1.2 <br />

Tab 1.3 <br />

</div>

</div>

<div class="Page">

<div class="Pad">

Tab 2.1 <br />

Tab 2.2 <br />

Tab 2.3 <br />

</div>

</div>

<div class="Page">

<div class="Pad">

Tab 3.1 <br />

Tab 3.2 <br />

Tab 3.3 <br />

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

tabview_initialize('TabView');

</script>

11. Lalu save dan lihat hasilnya.

ket:

- Ganti kode yang berwarna biru sesuai dengan menua sobat

Jangan lupa untuk tetap tersenyum

Salam senyum dariku.....

Salam senyum dariku untuk semuanya, tetaplah untuk bersemangat. Jangan lupa Comment atau isi buku tamu ya sob. Sedikit pemberitahuan untuk sobat yang ingin mengambil [Copy-Paste], Owner tidak melarang sobat untuk memperbanyak artikel namun Owner berharap sobat berlaku dengan bijak agar mencantumkan link active maupun yang tidak. Owner berharap partisipasinya ya sob.

---

---