Membuat Multi Kolom di bawah Header

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;
}
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>
<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
- 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.)
Makasih banyak bro..tutorialnya..
ReplyDeleteSalam kunjungan
http://www.bloghendri.com
ko' ga bisa gan????
ReplyDeletedesra 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.
ReplyDeleteooo gitu ya gan...
ReplyDeletethank's gan...