Cara Membuat Menu 3 Tab View

Bismillah
Menu tab view adalah menu yang bisa menampilakan 2 - 3 halaman atau lebih dalam satu kotak halaman widget sehinga dapat menghemat space pada ruangan side bar blog anda dan yang pasti selain lebih ramping juga tampil cantik. dan bisa menghemat 3 widget di satu tempat.
Tampilannya seperti gambar di bawah ini:

Membuat menu tab view bagi saya gampang-gampang susah. di bilang gampang karena sudah bisa, di bilang susah karna belum nyoba. baiklah tanpa banyak basa-basi lagi yuk langsung praktek aja, ikuti langkah-langkah berikut ini:



1. Login ke blogger trus pilih menu "Layout --> Edit HTML"

2. Kemudian cari kode ini ]]></b:skin>

3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs


{


height: 24px;


overflow: hidden;


}


div.TabView div.Tabs a


{


float: left;


display: block;


width: 84px; /* Lebar Menu Utama Atas */


text-align: center;


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


padding-top: 3px;


vertical-align: middle;


border: 1px solid #999999; /* 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: #1E62B6; /* Warna Font Menu Utama Atas */


}


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


{


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


}


div.TabView div.Pages


{


clear: both;


border: 1px solid #999999; /* 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;


}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll.

5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script type='text/javascript'>

function tabview_aux(TabViewId, id)

{

var TabView = document.getElementById(TabViewId);



// ----- Tabs -----



var Tabs = TabView.firstChild;

while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;



var Tab = Tabs.firstChild;

var i = 0;



do

{

if (Tab.tagName == &quot;A&quot;)

{

i++;

Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;

Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;

Tab.blur();

}

}

while (Tab = Tab.nextSibling);



// ----- Pages -----



var Pages = TabView.firstChild;

while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;



var Page = Pages.firstChild;

var i = 0;



do

{

if (Page.className == &#39;Page&#39;)

{

i++;

if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;

Page.style.overflow = &quot;auto&quot;;

Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;

}

}

while (Page = Page.nextSibling);

}



// ----- Functions -------------------------------------------------------------



function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }



function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }

</script>

6. Kemudian "Di save"

7. Lalu pergi ke menu "Page Elements"

8. Pilih "Add a Gadget" --> "HTML/Javascript" di tempat yang akan anda letakkan Manu Tab View ini.

9. Inilah script yg harus di pasang :

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

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

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

<a>Tab 1</a>

<a>Tab 2</a>

<a>Tab 3</a>

</div>

<div class="Pages" style="width: 256px; height: 270px;">



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

Keterangan :

- Angka2 atau text yang berwarna biru (260px) adalah ukuran tinggi dan lebar tabview.

- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).

- Kode yang berwarna merah adalah isi dari tabview tsb. Anda bisa mengisinya dengan link, gambar, banner, script dll.

- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip-kedip. tambahkan menu tersebut dibawahnya.

wassalam... salam blogger dari santri-one

Jangan Lupa Baca yang ini Lho yach..: