Membuat 3 Kolom Baru di Bawah Header

loenstoneofficial

Kamis, 30 Juni 2011

Bagikan :

Tweet

Cara menambahkan  3 kolom di bawah header. Hallo sobat informasi maya apa kabar? kali ini kang salman mau berbagi tips bagaimana cara membuat  kolom baru di bawah header dan cara menamambah kolom baru bawah body (footer). udah pernah main ke blog kang rohman belum? nah bila anda pernah kesana mungkin anda akan melihat pembagian kolom baru di bawah header. bagaimana sih cara buatnya :

Cara membuat head menjadi 3 kolom :

1.  Login ke blogger.
2.  Setelah masuk dasbor lalu pilih Tata Letak.
3.  setelah itu klik Edit HTML.
4.  Cari kode ]]></b:skin> 

5.  Copy kode di bawah ini dan simpan di atas kode ]]></b:skin>

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


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


6.Selanjutnya Cari kode dibawah ini .

    <div id='header-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>


7.Jikalau sudah ketemu Hapus kode <b:section class='footer' id='footer'/> kemudian ganti bengan kode dibawah ini .

    <div id='header-column-divide'>

    <div id='header1' style='width: 30%; float:left;
    margin:0; text-align:left;'>
    <b:section class='header-column' id='col1'
    preferred='yes' style='float:left;'/>
    </div>

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

    <div id='header3' style='width: 30%; float: right;
    margin:0; text-align: left;'>
    <b:section class='header-column' id='col3'
    preferred='yes' style='float:right;'/>
    </div>

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


8.Klik Simpan Template .

Dan kemudian silakan anda lihat hasilnya

Tag : Tutorial Blog