Cara Menambahkan Dua Dan Tiga Kolom Elemen Halaman Dibawah Header -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Cara Menambahkan Dua Dan Tiga Kolom Elemen Halaman Dibawah Header, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel CSS dan HTML, Artikel Desain Template, Artikel Header, Artikel Tutorial Blogger, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Cara Menambahkan Dua Dan Tiga Kolom Elemen Halaman Dibawah Header
link : Cara Menambahkan Dua Dan Tiga Kolom Elemen Halaman Dibawah Header
Gambar dibawah ini

Cara Menambahkan Dua Dan Tiga Kolom Elemen Halaman Dibawah Header

Tutorial kali ini kembali kita akan belajar desain template, sebelumnya saya pernah membahas cara menambahkan elemen halaman atau kolom tambah gadget dibawah header. Nah sekarang kita akan belajar cara menambahkan elemen halaman dibawah header menjadi dua, tiga kolom atau multi kolom, seperti screenshot berikut.


Caranya sangat mudah, ikuti langkah-langkah berikut:

Cara menembahkan dua dan tiga kolom elemen halaman dibawah header:
1. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

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

Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!
2. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya (untuk dua kolom dibawah header):

<div id='box-main-container'>
<div id='box1' style='width: 50%; 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: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Jika ingin tiga kolom dibawah header maka kode berikut yang sobat letakkan diatas kode <div id='main-wrapper'>

<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>

3. Simpan template dan lihat hasilnya dibagian elemen halaman, jika berhasil sobat akan melihat seperti screenshot diatas.
Semoga bermanfaat. I hope you enjoyed this tutorial comments are welcome see my result

Demikianlah Artikel Cara Menambahkan Dua Dan Tiga Kolom Elemen Halaman Dibawah Header

Sekianlah artikel Cara Menambahkan Dua Dan Tiga Kolom Elemen Halaman Dibawah Header kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Cara Menambahkan Dua Dan Tiga Kolom Elemen Halaman Dibawah Header dengan alamat link https://trikmitos.blogspot.com/2010/01/cara-menambahkan-dua-dan-tiga-kolom.html