Cara Memasang Menu Multi Kolom

Langkah-langkah untuk memasang menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode diatas


Sample Hasilnya :

div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 90px; text-align: center;

height: 24px;

padding-top: 3px;

vertical-align: middle;

border: 1px solid #000;

border-bottom-width: 0;

text-decoration: none;

font-family: "Times New Roman", Serif;

font-weight: 900;

color: #000;

}

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

{

background-color: #FF9900;

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #6E6E6E;

overflow: hidden;

background-color: #FF9900;

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 0px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}

Keterangan :

- Angka yang berwarna merah-->lebar kotak menu utama
- Angka yang berwarna biru--> tinggi kotak menu utama
- Kode yang berwarna hijau--> warna border menu utama
- Kode yang berwarna ungu-->warna Font menu utama
- Kode yang berwarna abu-abu-->Warna background menu utama
- Kode yang berwarna kuning-->Warna border kotak utama
- Kode yang berwana orange-->warna background kotak utama

5. Silahkan masukkan kode dibawah ini sebelum kode </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian Save

Kemudian ke menu Layout-->Page Elements-->pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini-->HTML/Javascript

Silahkan masukkan script menu multi kolom dibawah ini:

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

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

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

<a>Title menu 1</a>

<a>Title menu 2</a>

<a>Title menu 3</a>

</div>

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

<div class="Page">

<div class="Pad">

Link 1 di menu 1 <br />

Link 2 di menu 1 <br />

Link 3 d1 menu 1 <br />

</div>

</div>

<div class="Page">

<div class="Pad">

Link 1 di menu 2 <br />

Link 2 di menu 2 <br />

Link 3 d1 menu 2 <br />

</div>

</div>

<div class="Page">

<div class="Pad">

Link 1 di menu 3 <br />

Link 2 di menu 3 <br />

Link 3 d1 menu 3 <br />

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

tabview_initialize('TabView');

</script>

Keterangan
- kode yang berwarna hijau adalah title menu anda
- kode yang berwarna biru adalah lebar dan tinggi menu multi kolom
- kode yang berwarna merah adalah isi dari menu anda

Silahkan dicoba,,semoga berhasil!!!