Home
tips

Cara Membagi header menjadi 2 kolom (2)


Setelah sebelumnya saya memuat artikel tentang Cara membuat header menjadi 2 kolom, kali ini saya akan memuat artikel serupa namun dengan kode HTML yang berbeda. Karena saya tahu tidak semua template memilki kode HTML yang sama, terutama untuk template baru yang cenderung sedikit rumit penempatan kode HTMLnya.
Cara Membagi header menjadi 2 kolom (2), Cara Membuat Header Menjadi 2 Kolom, Cara Membuat elemen baru di samping Header, header 2 kolom, widget di samping header, gadget di samping header endolita.blogspot.com
Lalu bagaimana Cara membuat header menjadi 2 kolom versi yang ini? Langsung saja akan saya jelaskan:

Cara Membagi Header Menjadi 2 Kolom Bag 2:
  1. Login ke akun Blogger
  2. Pilih Template >> Edit HTML
  3. Lalu cari kode header bawaan Template, kira-kira kode HTML nya mirip seperti di bawah ini:
    4. .header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}
  4. Ganti semua kode tersebut dengan kode berikut:
    5. .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
    _background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */}
    #header {
    width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
    margin-right: 10px;float: left; }
    #bgsGR_headerkanan {
    float: right;
    width: 49%; /* mengatur lebar header kanan */
    margin: 20px 10px 5px 10px;
    padding: 2px;}
    #bgsGR_headerkanan .widget {margin: 3px;}
  5. Kemudian cari kode yang mirip dengan kode berikut ini:
    6. <div class='region-inner header-inner'>
  6. Tambahkan kode berikut ini setelahnya:
    7. <b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
    sehingga hasilnya akan menjadi seperti ini:
    <div class='region-inner header-inner'><b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
  7. Simpan Template. Lalu cek Tata Letak untuk memastikan muncul elemen baru di samping header.
Itulah sekilas pemahaman saya tentang Cara Membagi Header Menjadi 2 Kolom (2). Semoga bermanfaat. Jika mencari artikel serupa, silahkan cek di bawah ini: