Cara Membuat Header Menjadi 2 Kolom Versi II

Salam sahabat...
Kali ini saya akan berbagi mengenai Cara Membuat Header Menjadi 2 Kolom ( Versi II ).
Setelah blogwalking dari Dunia Web Desain ketemu juga cara lain selain Versi I seperti yang sudah pernah saya share'kan sebelumnya.

Ok deh, tidak usah terlalu panjang lebar, langsung saja kita mulai langkah-langkahnya.

Pertama yang harus kita lakukan adalah :

• Login Blogger
• Pilih Rancangan
• Pilih Edit HTML ( jangan lupa untuk selalu backup template setelah memasuki langkah ini )
• Beri tanda Centang pada Expand Widget Template

Jika langkah diatas sudah dilakukan, selanjutnya kita cari kode  .header-outer (untuk lebih mudahnya gunakan Ctrl+F dalam melakukan pencarian)

Maka akan tampak kode seperti ini :

.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}

(kode bisa saja berbeda-beda untuk masing-masing template)

Hapus kode diatas gantikan dengan kode berikut :

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 126px;width:930px;margin:0 auto 0px;border:1px solid ; /* untuk mengatur tinggi header (height) */}
#header {
width: 59%;height: 105px; margin: 10px;padding: 0px;float: left;border:1px solid ;/* untuk mengatur lebar header kiri - title, description, image */}
#bgsGR_headerkanan {
float: right;
width: 36%;height: 105px;border:1px solid ; /* mengatur lebar header kanan */
margin: 10px;
padding: 0px;}
#bgsGR_headerkanan .widget {margin: 0px;}

Nah untuk menjalankan perintah diatas langkah berikutnya kita cari kode :

<div class='region-inner header-inner'>

Kalau sudah ketemu tambahkan kode berikut :

<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

Beginilah kira2 hasilnya :

<div class='region-inner header-inner'> <b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

Ok , langkah terakhir Simpan Template kamu dan lihat hasilnya.
Semoga berhasil dan sukses selalu.



Baca juga : Cara Membuat Header Menjadi 2 Kolom Versi I

Baca Juga :