Cara Membuat Header Menjadi Dua Kolom

Membagi Template Blog Menjadi Dua Kolom. Bagi blogger yang sudah makan asam garam didunia blogging sudah tidak asing atau sulit untuk menjadikan header blog menjadi terbelah dua kolom, namun bagi sebagian blogger yang masih baru mungkin masih kesusahan untuk hal ini bahkan sampai mencari atau mendownload template yang sudah tersedia 2 kolom header, kenapa hal itu diperlukan? Hal tersebut diperuntukan supaya blog tampil lebih menarik dengan cara menambahkan photo, image, atau untuk memonetise blog supaya menghasilkan uang atau dollar dengan cara memasang banner iklan pada header yang nantinya akan muncul sejajar dengan judul blog kita. Membagi header menjadi dua kolom ini dilakukan biasanya pada template default bawaan blogger yang headernya masih satu kolom, sedangkan untuk template-template yang beredar dan bisa didownload banyak yang sudah menyediakan header 2 kolom, sehingga kita tidak perlu repot lagi untuk membaginya. 

Ok, kita langsung pada tahap cara melakukan step by step untuk membagi kolom header.

Cara Membuat Header Menjadi 2 Kolom

• Buka www.blogger.com dan pilih blog yang ingin di ubah headernya menjadi dua.
• Pada menu Blogger klik Template.
• Hal pertama yang paling penting adalah membackup template dulu untuk menjaga dari kesalahan pengeditan dengan cara klik pada pojok kanan atas Cadangkan / Pulihkan, Unduh Template Lengkap.
  
  
  


•  Selanjutnya klik Edit HTML, dan akan terbuka kolom Editor HTML Blog anda.
  
  
  

• Cari kode .header-outer dengan cara tekan Ctrl F. Kemudian blok kode yang mirip dengan kode berikut:
  
  
  .header-outer {
   background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}
  
  

atau kode seperti ini :


.header-outer {   background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;

• Hapus kode diatas dan ganti dengan kode dibawah

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
 _background-image: none;min-height: 160px; }
#header {
width: 45%;
margin-right: 10px;float: left;
}
#tsa-headerbaru {
float: right;
width: 47%;
margin: 20px 10px 5px 10px;
padding: 2px;}
#tsa-headerbaru {margin: 3px;
}

• Selanjutnya cari kode

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

• Setelah menemukan kode  <div class="region-inner header-inner"> diatas, tempatkan kode berikut tepat diatasnya:
  
  
  <b:section class="tsa-headerbaru" id="tsa-headerbaru" maxwidgets="1" showaddelement="yes"></b:section>

•  Setelah selesai Simpan Template dan lihat hasilnya pada menu Tata Letak.

Setelah semua proses diatas selesai coba lihat pada menu Tata Letak, Sekarang Header sudah menjadi dua kolom, bila belum nampak maka browser harus di Reload atau Refresh dulu.. 

Keterangan:
min-height: 160px; = Tinggi Header adalah 160px, ganti sesuai selera anda 
width: 47% = Lebar Header kanan atau Header yang baru ditambahkan dan ada 8% jarak antar header. 
width: 45%;. = Lebar Header kiri

Sekian Posting kali ini semoga bermanfaat.