• home
Home » » Membuat Multi kolom

Membuat Multi kolom

Membuat menu multi kolom disini maksudnya membuat lebih dari satu menu dalam satu kolom, ini berguna sekali untuk menghemat space blog anda yang sudah memiliki menu yang banyak seperti pada contoh screenshot berikut:




Langkah-langkah untuk membuat 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
==================================================
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

Untuk mengetahui kode-kode warna silahkan klik disini

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

0 komentar:

Post a Comment

Bagaimana Pendapat Anda ?

Cara Berkomentar untuk yang tidak memiliki blog:
1. Klik selec profile --> pilih Name/URL
2. Isi nama kamu dan Kosongkan URL atau isi dengan alamat fb kamu
3. Klik Lanjutkan
4. Ketik komentar kamu dan publish
Form komentar ini tanpa moderasi dan verifikasi, jangan kirim SPAM ya..

Berkomentarlah yang baik karena komentar anda akan langsung muncul di kotak komentar.
Saya tunggu saran dan kritik anda melalui komentar
terimah kasih....

Contak Me at Facebook