Cara Membuat Dua Kolom Di Bawah Header

Cara Membuat Dua Kolom Di Bawah Header

 Pada  postingan kali ini kita akan mempelajari bagaimana cara membuat kolom elemen dibawah header. dengan adanya kolom dibawah header memungkinkan kita bisa menaruh hal yang lebih utama yang berada dalam blog kita, misalnya daftar isi blog kita, apakah agan mau mencobanya, caranya gampang gan...??? apabila anda ingin melihat bagaimana penggunaan dari kolom yang sudah dibuat silahkan klik Di Sini.

Dengan adanya kolom dibawah header blog agan mungkin akan kelihatan sedikit lebih rapi, apalagi kalau agan bisa manfaatkan dengan menaruh sesuatu yang lebih menarik dan tentunya bagus, mungkin akan membuat pengunjung blog agan akan merasa lebih nyaman dan senang berkunjung ke blog agan.

Ni gan langkahlangkahnya :

1. Log in dulu ke blogger
2. Masuk ke bagian Layout -> kemudian pilih Edit Html 
3. sSilahkan backup dulu template agan, dg cara klik Download Template Lengkap
4. Beri tanda centang expand template widget 
5. Kemudian cari kode seperti ini ]]></b:skin> 
6. Silahkan copy kode yang ada dibawah ini

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

   7. Silahkan paste kode yang sudah agan copy tadi tepat di atas kode ]]></b:skin>

Langkah selanjutnya:

   8. Silahkan cari kode seperti ini <div id='main-wrapper'>

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

   9. Kemudian paste kode yang tadi tepat diatas kode <div id='main-wrapper'>
  10. Kemudian di simpan . .

Kalau mau lihat hasilnya silahkan masuk ke element laman

Sumber : http://www.poetra-anoegrah.co.cc