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 Template >> 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.)

Related Posts

Membuat Multi Kolom di bawah Header
4/ 5
Oleh

4 comments

12 December 2010 at 23:33 delete

Makasih banyak bro..tutorialnya..

Salam kunjungan
http://www.bloghendri.com

Reply
avatar
20 February 2011 at 21:24 delete

desra rizki > coba di coba lagi gan, mungkin ada yg kelewatan. Kalau masih blm bisa mungkin template blog yang agan gunakan berbeda dengan yang saya maksud, jadi tidak dapat menggunakan cara ini. Memang sebagian tempalte itu berbeda beda gan.

Reply
avatar
6 May 2011 at 20:08 delete

ooo gitu ya gan...
thank's gan...

Reply
avatar