Membuat Multi Kolom Di Bawah Header
Minggu, 05 Februari 2012
0
komentar
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;
}
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
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.)
Selamat Mencoba
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Membuat Multi Kolom Di Bawah Header
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2012/02/membuat-multi-kolom-di-bawah-header.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh Unknown
Rating Blog 5 dari 5
Categories:
Trik dan Tips Blog
0 komentar:
Posting Komentar