Cara Membuat 3 Kolom di Bawah Header

Cara Membuat 3 Kolom di Bawah Header | Bo gspot | Cara Membuat 3 Kolom di Bawah Header Kretifitas bloger memang perlu terus diasah, untuk menjadikan blog yang unik dan digemari pengunjung. postingan sebelumnya telah membahas cara membuat 2 kolom pada header nah sekarang kita akan belajar Cara Membuat 3 Kolom di Bawah Heade. Lagsung saja ...........

1. Login ke blogger atau klik disini»
2. Pilih Template » Edit Html » Lanjutkan. ( Jangan Lupa centang Expand template widget.)
3. Cari code di bawah ini. Untuk mempermudah pencarian tekan ctrl+atau F3.

]]></b:skin>

4. Setelah code di atas ketemu, copy code di bawah ini dan letakkan di atas code  

     ]]></b:skin>

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

5. Kemudian cari code di bawah ini. Untuk mempermudah pencarian tekan ctrl+F atu F3

<div id='main-wrapper'> bila tidak ada cari code ini <div class='main-outer'>

6. Setelah salah satu code di atas ketemu, copy paste code di bawah ini dan letakkan di atas salah satu code di atas.

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

7. Save Template.....

Selesai, mudah bukan? nah praktekan saja.....

Semoga bermanfaat...............

Komputer Tips/Trik Saturday, May 18, 2013