cara bikin menu tab view

Beginilah cara untuk membuat menu tab view tersebut



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

}

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 != "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>

6. Kemudian "Di save"

7. Lalu pergi ke menu "Page Elements"

8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.


9. Inilah script yg harus kamu pasang :



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

Keterangan :

- Angka2 atau text yang berwarna biru (350px) 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 tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.