Cara membuat tab menu view

Tab menu view merupakan tips yang bagus terutama untuk menghemat tempat dimana kategori yang sekian banyak akan di jadikan satu.. sehingga ruang yang luas bisa untuk keperluan yang lain.

untuk keperluan membuat tab men view memerlukan ketelitian terutama meletakan kode HTML, sebelum melakukannya sobat harus backup terlebih dahulu template.

hayooo.. kita langsung saja.. ke sasaran.. heee.. langkah-langkahnya sebagai berikut:

1. Silahkan login ke blogger dengan ID sobat tentunya.
2. Tuju Tata Letak.
3. Klik Edit HTML.
4. Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.
5. Kemudian letakkan kode javascript berikut sebelum kode </head>

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

Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

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;

}

Kemudian Simpan Template.
Langkah selanjutnya, silahkan sobat klik Tata Letak.
Klik Elemen Halaman dan tambahkan Gadget.
Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.

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

Kemudian Simpan Template.

Posted in: tutorial blog