Cara membuat header menjadi 2 kolom

Penambahan kolom di sini dimaksudkan untuk memasang iklan atau apasaja di samping header,seperti pada header blog bocah ini,penambahan ini biasanya untuk template blog yang bawaan blogspot,yang kebanyakan cuma satu kolom pada header.

yang ingin mencoba silahkan ikuti triknya berikut ini:




  • Log in dulu ke blogger

  • Tata letak

  • Edit HTML

  • Download tamplate anda untuk mengatasi hal-hal yang tak diinginkan

  • Jangan lupa kasi tanda centang di kotak kecil kanan atas

  • Kemudian cari kode
    #header-wrapper {
    width:660px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }

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

    #header {
    margin: 5px;
    border: 1px solid $bordercolor;
    text-align: center;
    color:$pagetitlecolor;
    }

  • Kemudian hapus dan ganti dengan kode di bawah ini
    #header-wrapper {
    width:930px;
    margin:0 auto 0px;
    background:#38610B;
    height:180px;
    }

    #head-inner {
    width:500px;
    background-position: left;
    margin-left: auto;
    margin-right: auto;
    float:left;
    }

    #header {
    margin: 0px;
    text-align: left;
    color:#ffcc66;
    }

    #r_head{
    width:430px;
    float:left;
    padding-top:10px;
    }

  • Kemudian cari kode
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
    </b:section>
    </div>

  • Hapus dan ganti dengan kode
    <div id='header-wrapper'>
    <div id='head-inner'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
    </b:section>
    </div>
    <div id='r_head'>
    <b:section class='header' id='header2' preferred='yes'/>
    </div>
    </div>

  • kemudian save tamplate anda dan lihat hasilnya.


  • 0 komentar:

    Posting Komentar

    KOMENTAR

    Popular Posts Today