Membuat Tab View Menu

Bagaimana kabar teman-teman semua?? Semoga sehat selalu.

Kali ini di saat orang rumah lagi pada sibuk packing buat mudik besok, saya mah mau posting aja ah...

Kali ini juga kita akan mengetahui bagaimana cara membuat tab menu tiga buah dalam satu tempat yang sama. Penulis juga selalu gagal dalam membuatnya, tapi dengan kegigihan dan nasi dua piring (Loh??) akhirnya jadi juga tuh. Hasilnya bisa kalian lihat tuh di sebelah kanan blog.

Buat kalian yang belum tau dan ingin tau caranya, Tetep pantengin ini postingan sampai habis!! Buat kalian yang sudah tau, bisa dilihat atuh postingan yang lainnya.

Oke, langsung ke TKP!

Cara yang pertama, LOG IN ke blogger kawan, masuk ke RANCANGAN lalu klik EDIT HTML

Kedua, Jangan lupa centang EXPAND TEMPLATE WIDGETS

Ketiga, Eh... Sebelumnya jangan lupa back up template kalian dengan cara klik  DOWNLOAD TEMPLATE LENGKAP

Keempat, Cari kode berikut

---

</head>

---

Lalu masukan kode berikut sebelum kode tadi

---

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

---

Sekarang cari kode berikut

---

]]></b:skin>

---

Lalu masukin kode berikut di atas kode tadi

---

div.TabView div.Tabs

{

height: 30px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 98px; /* 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: #E6E6E6; /* Warna background Menu Utama Atas */

}

div.TabView div.Pages

{

clear: both;

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

overflow: hidden;

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

}

---

Klik Simpan Template

Selanjutnya, Ke TATA LETAK dan klik TAMBAH GADGET

Klik HTML / Javascript dan masukkan kode berikut

---

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

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

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

<a>Tab 1</a>

<a>Tab 2</a>

<a>Tab 3</a>

</div>

<div class="Pages" style="width: 300px; 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>

---

Simpan

Keterangan:

• Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan kalian sesuaikan dengan isi. 
• Kode yang berwarna biru silahkan kalian isi dengan judul - judul dari menu.   
• Dan yang berwarna ungu, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

Thanks to Miscah 4 this Tutorial

Artikel Terkait:

Recent Post