Cara Membuat Multi Kolom

Screen Shoot Multi kolom

Wew..masih pagi tapi panas bener Di daerah kalian panas gak sih? Atau aku aja yang ngerasa panas? Mungkin ini pertanda saya udah banyak dosa kali ya??? Astagfirullah.

Back to Topik. Apa itu Multi Kolom.??? Multi Kolom bisa diartikan lebih dari 1 menu dalam 1 kolom.  Liat aja gambar diatas  untuk lebih jelasnya 

Emang apa gunanya??? Gunanya banyak.!!! Contohnya saja, bagi blogger yang postingnya sudah banyak, maka multi kolom ini dapat digunakan untuk mempermudah visitor lebih mengenal blog anda, bisa menghemat space di blog kalian, dan yang gak kalah penting. Bisa membuat blog kalian tampil lebih keren

Oke langsung aja kita mulai.

Langkah pertama adalah
1. Login ke blogger
2. Pilih Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin> , biar lebih gampang and cepet gunakan shortcut ctrl + f pada
    keyboard. Trus paste kodenya.
4. Lalu masukan kode dibawah ini diatas kode ]]></b:skin>

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 lihat kode warna klik DISINI


5. Lalu silahkan masukkan kode dibawah ini sebelum kode </head>

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

 6. Udah, tinggal klik Save



Sampai disini ngerti gak??? kalau ada yang belum jelas, silahkan dibaca ulang dengan seksama


Kalau sudah, klik lagi menu Layout-->Page Elements --> pilih Add Gadget --> HTML/Javascript

Trus 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

Oke..Cukup sekian untuk tips kali ini. Semoga bermanfaat. Selamat mencoba