Cara membagi header di Tatal etak menjadi 2 kolom


Assalamualaikum wr.wb , Selamat datang kembali bagi anda yang sudah pernah datang ke blog saya dan selamat datang untuk anda yang belum pernah datang ke blog saya, ok kawan kali ini saya akan membahas Cara membagi header di Tata letak menjadi 2 kolom , ga usah panjang lebar gan kita langsung mulai aja.
 

  1. Login pada pada Blogger menggunakan id blog sobat
  2. Template
  3. Edit HTML lalu Lanjutkan
  4. pertama - tama cari kode #header-wrapper { atau lebih lengkapnya mirip seperti di bawah ini
    #header-wrapper {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL_cB0EAFim9HNj3pqppL_tJzyr8RLQkx6-5ffXQ1GcrRwDZ81lX1USadnMzj52UTSwlh-bobNg1Jjh4rjeCV9U-AYBtRFRjI5XRnKV_bQ_KCWWtPmCaO7VHNE3POJqiAE3J5Zvthqe1e9/s1600/line.gif) repeat-x scroll left bottom;
    height:119px;
    width:900px;
    }
    #header-inner {
    background-position:center center;
    margin-left:auto;
    margin-right:auto;
    }
    #header {
    color:#000000;
    text-align:left;
    }
  5. Delete dan ganti kode tersebut dengan kode dibawah ini:
    #header-wrapper {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL_cB0EAFim9HNj3pqppL_tJzyr8RLQkx6-5ffXQ1GcrRwDZ81lX1USadnMzj52UTSwlh-bobNg1Jjh4rjeCV9U-AYBtRFRjI5XRnKV_bQ_KCWWtPmCaO7VHNE3POJqiAE3J5Zvthqe1e9/s1600/line.gif) repeat-x scroll left bottom;
    height:100px;
    width:900px;
    }
    #header-inner {
    width:428px;
    margin:0 auto;
    padding-top:6px;float:left;
    }
    #header {
    color:#000000;
    text-align:left;
    }
    #r_head{
    width:468px;
    float:right;
    padding-top:6px;
    }
  6. Langkah selanjutnya geser scroll ke bawah dan cari kode <div id='header-wrapper'> atau lebih lengkapnya mirip seperti di bawah ini
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Blognya Reggy Demo (Header)' type='Header'/>
    </b:section>
    </div> 
  7. Delete kode di atas dan ganti dengan kode di bawah ini
    <div id='header-wrapper'>
    <div id='header-inner'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Blognya Reggy Demo (Header)' type='Header'/>
    </b:section>
    </div>
    <div id='header-kanan'>
    <b:section class='header2' id='header2'/>
    </b:section>
    </div>
    </div>
  8. Simpan Template.
 Hasilnya:

This entry was posted in

Leave a Reply