Home » » Membagi Header menjadi dua bagian

Membagi Header menjadi dua bagian

Untuk memperlengkap tutorial design tamplate yang sesudahnya. kali ini kita coba membahas cara membagi header menjadi dua bagian kolom. biasanya default header kan cuman satu, nah header itu bisa di bagi menjadi dua bagian. coba anda lihat contoh di bawah ini.
Nantinya elemen baru itu tadi dapat digunakan untuk penempatan iklan, gambar atau widget lainnya. Nah untuk membuatnya anda sedikit menambah kan kode css ke dalam tamplate. yang ingin menerapkan article ini silahkan ikuti tips-tips dibawah 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.
Share this article :

6 komentar:

  1. Mantaaap sob artikelnya :)
    Ijin share http://grosiracemaxstasik.com/pengobatan-alami-ambeien/
    http://grosiracemaxstasik.com/
    http://grosiracemaxstasik.com/ace-maxs/

    BalasHapus
  2. terimakasih atas infonya gan
    http://ramuantradisionalkita.com/pengobatan-tradisional-kanker-usus/

    BalasHapus
  3. terimakasih infonya gan
    http://obattradisionalacemaxs.net/obat-tradisional-mastitis/

    BalasHapus
  4. keren artikelnya bro
    http://ramuantradisionalkita.com/

    BalasHapus
  5. Thanks guys artikelnya, izin share :)
    http://kedaiacemaxs.com/obat-tradisional-jantung-berdebar/

    BalasHapus
  6. Thanks sob untuk informasi artikelnya :)
    http://goo.gl/sDr4ga

    BalasHapus

Bisnis Dahsyat tanpa modal
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2013. free - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger