Membuat Header Blogspot Menjadi dua Kolom

Kita sudah mengenal Struktur Dasar Template Blogspot dan dengan pengenalan tersebut kita dapat juga merubah Lebar Header, Halaman Posting dan Sidebar dengan mengenal sedikit kode utama bagian tersebut. Sekarang kita coba membagi Header menjadi dua kolom.

Membuat Header Blogspot Menjadi dua Kolom, Bagaimana sih bentuk header dua kolom tersebut. kira-kira seperti sobat lihat di bawah ini, yang sebelah kiri merupakan header utama yang di potong sedangkan sebelah kanan header hasil potongan.

Di dalam postingan ini header yang akan di modifikasi adalah untuk blog yang memakai templete baru.

PERTAMA

• Login terlebih dahulu, kalau sudah login silahkan langsung ke RANCANGAN
• Klik Edit HTML
• Sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula.
• Jangan lupa di centang Expand Template Widget
• Kalau sudah kita mulai merubah html nya

Cari kode seperti dibawah ini, cara cepat nya tekan (Ctr + F pada keyboard) fokus pencarian pada huruf bercetak tebal .header-outer

.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}

Hapus kode di atas dan ganti (replace) dengan kode di bawah ini

.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;}

KEDUA

Cari kode di bawah ini

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

Tambahkan dengan kode di bawah ini

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

Hasil jadi seperti bawah ini

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

catatan :

• Untuk yang bercetak tebal merupakan kode yang di tambahkan tambahan 
• Untuk yang bercetak merah angka nya bisa anda bisa ganti dengan angka 2,3,4 atau lain nya..maksud nya untuk susunan kolom kebawah. 

KETIGA 

• Selesai dan simpan template

Selamat Mencoba Semoga Berhasil.