Cara Membuat 3 Tiga Kolom Dibawah Header

Cara membuat 3 kolom dibawah header, menambah gadget widget tiga column kotak box setelah judul blog, berfungsi untuk membuat space iklan banner atau aplikasi lainnya yang anda inginkan. Langsung saja ke inti nya perhatikan caranya dibawah ini.

Membuat 3 tiga kolom tepat dibawah header atau judul blog, disini ada berbagai macam kode yang dibahas, pilih salah satu yang mana berhasil karena setiap template blog mempunyai style kode yang berbeda tapi artinya tetap sama hanya saja berbeda teks penulisan nya, Perhatikan gambar untuk 3 kolom dibawah header dibawah ini:

Untuk membuat atau menambah 3 kolom pada gambar diatas, perhatikan caranya dibawah ini:

Disini kita akan coba dengan 3 cara, silahkan pilih cara mana yang berhasil diterapkan ke template blog anda, ingat sebelum edit template back up dulu template anda untuk menjaga terjadinya error.

- Cara Pertama

• Log in blog anda
• Ke menu template, edit html, jangan lupa klik tombol expand widget
• Cari kode ]]></b:skin> dan copy kode dibawah, kemudian paste kan tepat diatas kode ]]></b:skin> tersebut. Copy kode nya dibawah ini

<div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
</div> 

• Kemudian cari kode <div id='main-wrapper'> atau <div id="main-outer"> atau <div class='main-outer'>
• Setelah ketemu kode diatas kemudian copy kode dibawah ini dan paste kan tepat diatas kode  <div id='main-wrapper'> atau <div id="main-outer"> atau <div class='main-outer'> , silahkan copy kode nya dibawah ini

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

• Finish

- Cara kedua

• Langkahnya sama seperti cara pertama
• Cari kode ]]></b:skin> dan copy kode dibawah kemudian paste kan tepat diatas kode ]]></b:skin> , Copy kode nya dibawah ini

#triunderheader {clear:both;} .triwidget {}

• Kemudian cari kode <div id='main-wrapper'> , copy kode dibawah dan paste kan tepat diatas kode <div id='main-wrapper'>

<div id='triunderheader'>
<div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='header' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 35%; float: center; margin:0; text-align: left;'>
<b:section class='header' id='kolom2' preferred='yes' style='float:center;'/>
</div>
<div id='kolom3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='header' id='kolom3' preferred='yes' style='float:right;'/>
</div>
</div>

• Finish

- Cara ketiga

• Langkah nya sama seperti cara pertama dan kedua
• Cari kode ]]></b:skin> dan copy kode dibawah dan paste tepat diatas kode
  ]]></b:skin> . Copy kode nya dibawah ini

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

• Kemudian cari kode <div id='main-wrapper'> atau <div id='content-wrapper'> , jika ketemu copy kode dibawah dan paste kan tepat diatas kode <div id='main-wrapper'> atau <div id='content-wrapper'> . Copy kode nya dibawah ini

<div id='box-main-container'>
<div id='box1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='Raxter1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='Raxter2' preferred='yes' style='float:center;'/>
</div>
<div id='box3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='Raxter3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

• Finish

Note: Anda juga bisa menambah gadget diatas judul header dan menambah gadget diatas postingan blog silahkan baca artikel dibawah ini

1. Cara Menambah Gadget Diatas Header judul
2. Cara Menambah Gadget Diatas Postingan Blog  
3. Cara Menambah 2 Dua kolom Dibawah Header Judul

Terima kasih telah berkunjung ke blog saya, mudah - mudahan anda tidak menemui kesulitan dalam memahami aritkel tentang Cara Membuat 3 Tiga Kolom Dibawah Header