Cara Membuat Kolom dibawah Header yang mudah

Mungkin kata-kata ini sudah terlintas dipikiran sobat dan tentu bertanya masak to membuat kolom dibawah header itu mudah?..beneran sob...cara ini sangat mudah yang pernah aku jumpai di beberapa blog tutoril. hanya dengan sentuhan CSS dan kode HTML kita bisa menikmati beberapa kolom..kog nanya lagi...??? iya memang iya dan jawabannya juga iya thok....hehehe..biar tak penasaran silahkan ikuiti petunjuk yang kami tutur kan ini.

1. login ke blogger masing-masing 

2. silahkan menuju edite HTML dan jangan lupa untuk centang Expant Widget Tamplatenya.

3. kalau sudah cari kode ]]</b:skin> kalau sudah bertemu silahkan letakkan kode dibawah ini tepat diatasnya, buat yang tidak menjumpai kodenya berarti tamplate sobat binasa...hehehehhe

#header-isor-divide {
clear:both;
}
.header-column {
padding: 10px;
margin :5px auto;
}

4. kalau sudah kalian taruh kodenya silahkan cari kode 

<div id='outer-wrapper'>

nah kalau sudah ketemu silahka taruk kode dibawah ini ya...tepat dibawahnya...

Klik alias Buka >>

untuk satu kolom kodenya ini

<div id='header-isor-divide'>
    <div id='header1' style='width: 100%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col100'
    preferred='yes' style='float:left;'/>
    </div>
    <div style='clear:both;'/>
</div>

untuk dua kolom kodenya ini

 <div id='header-isor-divide'>
    <div id='header1' style='width: 50%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col100'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='header2' style='width: 50%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col101'
    preferred='yes' style='float:left;'/>
    </div>

    <div style='clear:both;'/>
</div>

untuk tiga kolom kodenya ini.

 <div id='header-isor-divide'>
    <div id='header1' style='width: 33%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col100'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='header2' style='width: 33%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col101'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='header3' style='width: 33%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col102'
    preferred='yes' style='float:left;'/>
    </div>
    <div style='clear:both;'/>
</div>

kalau sudah kalian taruh kodenya silahkan langsung di simpan dan lihat hasilnya. kalau sobat masih gagal silahkan tinggalkan komentar dan mohon sebelum kalian simpan cek lebih detail dulu. mungkin hanya itu saja sob update  Cara Membuat Kolom dibawah Header yang simple semoga bermanfaat buat kalian.

Posted in: Tutorial