Cara Membuat 2 Dua Kolom Header

Cara Membuat 2 Kolom Header - Apa kabar sobat blogger??siang ini saya harapkan dapat membawah suasana nyaman untuk sobat blogger terutama nyaman berada di blog ini. hehehe..

Kali ini saya akan kasih tahu bagaimana cara membuat 2 kolom header di blog.

Bagi sobat yang tertarik, silahkan ikuti cara membuat 2 kolom header berikut ini.

1. Pertama sobat login ke akun blog sobat
2. Klik rancangan--> edit HTML

3. Jangan centang kotak expand template widget
4. Cari kode css yang mirip di bawah ini:

    #header-wrapper {
    width:900px;
    margin:0 auto 0px;
    background:$bgheadercolor;
    height:190px;
    }
    #header-inner {
    width:900px;
    background-position: center;
    margin-$startSide: auto;
    margin-$endSide: auto;
    }
    #header {
    margin: 0px;
    text-align: left;
    color:$pagetitlecolor;
    }

5. Ganti kode di atas dengan kode berikut.

    #header-wrapper{
    width:980px;
    padding:20px 0 0 0;
    background:#000000;
    margin:0 auto;
    border:;}

    #header-inner{
    background-position:center;
    margin-left:auto;
    margin-right:auto}

    #header{
    float:$startSide;
    width:400px;
    margin:0 auto;
    border:0px solid $bordercolor;
    text-align:left;
    color:$pagetitlecolor
    }

    #header2{
    float:$endSide;
    width:400px;
    margin:0 auto;
    text-align:left;
    }

Tambahan :

• Edit kode di atas sesuai keinginan sobat terutama kode width yang harus di sesuaikan dengan ukuran header blog sobat.

6. Scroll ke bagian bawah, dan temukan kode yang mirip seperti ini

<div id='header-wrapper'>

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='judul blog (Header)' type='Header'/>
</b:section>

Fokuskan pencarian pada kode

<div id='header-wrapper'>

7. Ganti kode di atas dengan kode berikut:

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='judul blog(Header)' type='Header'/>
</b:section>
      <b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
      </div><!-- end header-wrapper -->

8. Klik simpan perubahan

9. Langkah terakhir, klik ELEMEN LAMAN dan lihat bila sudah menjadi 2 kolom.

Selesai
Semoga membantu!!

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Membuat 2 Dua Kolom Header. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://azka-veiro.blogspot.com/2012/07/cara-membuat-2-dua-kolom-header.html" target="_blank">Cara Membuat 2 Dua Kolom Header</a>

:: Get this widget ! ::