Welcome to my blog Friends

Selasa, 14 Desember 2010

Membuat Multi Kolom Di Bawah Header

Halo sobat, yah pada kesempatan kali ini saya akan posting mengenai blogger lagi, cuma mau share aja. Mungkin sebagian besar sobat blogger udah tau cara ini, namun saya hanya sekedar share" ilmu saja. Nah bagi yang belum tahu tentang cara Membuat Multi Kolom di bawah header, akan saya bahas di postingan kali ini.

Langsung saja, berikut caranya :

1. Masuk ke akun blog anda masing"

2. Pergi ke Rancangan >> Edit Html >> beri tanda cek pada kotak kecil "Expand Template Widget" (kalau perlu di backup dulu biar nanti kalau salah bisa di upload ulang template anda. Caranya klik "Download Template Lengkap")

3. Cari kode ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

4. Sekarang tuju ke bawah dan cari kode <div id="'main-wrapper'">, setelah ketemu masukkan kode di bawah ini di atas kode tersebut.

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'> <b:section class='box-column' id='col3' preferred='yes' style='float:right;'/> </div>
<div style='clear:both;'/>
</div>

5. Klik Simpan Template

Catatan :

- Kode di langkah no 4 adalah code jumlah kolom yang mau kamu tambahkan (tentukan jumlah yang ingin kamu buat. Untuk menambahkan kolom tinggal copy/paste kode yang berwarna biru. dan ganti box3 menjadi box4/5/6 dst. lalu ganti juga col3 menjadi col4/5/6 dst)

- Kode berwarna merah adalah lebar per kolom (tentukan lebarnya menurut kolom yang akan kamu buat.)

0 komentar:

Posting Komentar

Visit My Facebook