Cara Membuat kolom dibawah header di blog

buat sobat yang bertanya kemarin cara menambah kolom di bawah header silahkan simak tips-tipsnya dibawah ini. untuk tipsku kali ini sesuai judul postingan yaiti caranya membuat 1 kolom, 2 kolom, 3 kolom, 3 kolom, 4 kolom, dan 5 kolom. nah bingungkan.....hehehheehehe tak usah bingung sob ini bisa jadi kenyataan kalau kalian ikuti tips-tipsnya. ok langsung saja kita mulai caranya.

1. silahkan masuk ke akun blog sobat dan langsung menuju edit template

2. silahkan centang expant template widget

3. silahkan cari kode ]]</b:skin> kalau sudah ketemu silahkan taruh kode dibawah ini tepat diatasnya

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

4. kalau sudah kalian taruh kodenya silahkan cari kode ini <div id='outer-wrapper'>

5. nah kalau kalian sudah menemukan silahkan letakkan kode di bawah ini tepat di bawahnya

Klik >>

ini untuk 1 kolom

<div id='footer-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>

ini untuk 2 kolom

<div id='footer-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>

ini untuk 3 kolom

<div id='footer-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>

ini untuk 4 kolom

<div id='footer-isor-divide'>
    <div id='header1' style='width: 25%; 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: 25%; 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: 25%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col102'
    preferred='yes' style='float:left;'/>
    </div>
   
    <div id='header4' style='width: 25%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col103'
    preferred='yes' style='float:left;'/>
    </div>
    <div style='clear:both;'/>
    </div>   

ini untuk 5 kolom

<div id='footer-isor-divide'>
    <div id='header1' style='width: 20%; 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: 20%; 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: 20%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col102'
    preferred='yes' style='float:left;'/>
    </div>
   
    <div id='header4' style='width: 20%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col103'
    preferred='yes' style='float:left;'/>
    </div>
   
    <div id='header5' style='width: 20%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col104'
    preferred='yes' style='float:left;'/>
    </div>
    <div style='clear:both;'/>
    </div>

nah...kalau kalian sudah menaruh kodenya silahkan kalian save. oh iya silahkan pilih berapa kolom yang kalian mau. kalau kalian mau yang sepuluh kolom silahkan pesan dulu ya...biar aku pesankan ke bengkel las depan rumah hehehehehe.... wah sudah siang sob mau jum'atan dulu. ok silahkan applikasikan sendiri tutorialku kali ini.

Share To :

Tweet

Share