Welcome

Versi

Blogger (49) Buku (25) Game (13) Game Flash (6) Musik (8) Software (12) Television (2) Video (7)

Brunomars

Me And My Love

Minggu, 25 Maret 2012

Cara Membuat Header Menjadi 2 Bagian


  1. Seperti biasa dalam keadaan log in pada account sobat
  2. Klik rancangan
  3. Klik Edit HTML
  4. Bisa Download Template Lengkap jika khawatir gagal
  5. Sekarang cari kode CSS seperti yang mirip beikut:
    /* Header
    ----------------------------------------------- */
    #header-wrapper {
    width:930px;
    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;
    }
  6. Ganti kode diatas dengan kode dibawah ini:
    /* Header
    ----------------------------------------------- */
    #header-wrapper {
    width:930px;
    margin:0 auto 0px;
    background:#ffff;
    height:180px;
    }
    #header-one {
    width:50%;
    background-position: left;
    margin-left: auto;
    margin-right: auto;
    float:left;
    }
    #header {
    margin: 0px;
    text-align: left;
    color:$pagetitlecolor;
    }
    #header_two{
    width:50%;
    float:left;
    padding-top:10px;
    }
    Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka width dengan lebar header template sobat.
  7. Sekarang cari kode seperti berikut:
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
    </b:section>
    </div>
  8. Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:
    <div id='header-wrapper'>
    <div id='header-one'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
    </b:section>
    </div>
    <div id='header_two'>
    <b:section class='header' id='header2' preferred='yes'/>
    </div>
    </div>
  9. Klik Simpan Template
  10. Selesai
Untuk melihat hasil, klik elemen halaman, jika tampilan header sobat-sobat sekalian serupa screenshoot diatas, berarti kamu berhasil. Silahkan isi kolom baru dengan ragam widget atau ads.

  1. Seperti biasa dalam keadaan log in pada account sobat
  2. Klik rancangan
  3. Klik Edit HTML
  4. Bisa Download Template Lengkap jika khawatir gagal
  5. Sekarang cari kode CSS seperti yang mirip beikut:
    /* Header
    ----------------------------------------------- */
    #header-wrapper {
    width:930px;
    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;
    }
  6. Ganti kode diatas dengan kode dibawah ini:
    /* Header
    ----------------------------------------------- */
    #header-wrapper {
    width:930px;
    margin:0 auto 0px;
    background:#ffff;
    height:180px;
    }
    #header-one {
    width:50%;
    background-position: left;
    margin-left: auto;
    margin-right: auto;
    float:left;
    }
    #header {
    margin: 0px;
    text-align: left;
    color:$pagetitlecolor;
    }
    #header_two{
    width:50%;
    float:left;
    padding-top:10px;
    }
    Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka width dengan lebar header template sobat.
  7. Sekarang cari kode seperti berikut:
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
    </b:section>
    </div>
  8. Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:
    <div id='header-wrapper'>
    <div id='header-one'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
    </b:section>
    </div>
    <div id='header_two'>
    <b:section class='header' id='header2' preferred='yes'/>
    </div>
    </div>
  9. Klik Simpan Template
  10. Selesai
Untuk melihat hasil, klik elemen halaman, jika tampilan header sobat-sobat sekalian serupa screenshoot diatas, berarti kamu berhasil. Silahkan isi kolom baru dengan ragam widget atau ads.

Tidak ada komentar:

Posting Komentar