Cara Membuat Header Blog 2 dan 3 Kolom di Template Simple Blogger

Baca Juga

Cara Membagi atau Menjadikan Header Blog Menjadi Dua Kolom - Untuk Logo/Nama Blog dan Iklan atau Menjadi Tiga Kolom.

Tampilan default header blog hanya berjumlah satu kolom, yaitu untuk nama, judul, atau logo blog. Tidak ada ruang lagi buat elemen lain, misalnya iklan.

Berikut ini cara membuat header blog menjadi dua kolom, khususnya untuk tema Sederhana (Simple) template bawaan Blogger.

Cara Membuat Header 2 Kolom di Template Blogger

1. Klik Tema > Edit HTML

2. Cari (Ctrl+F) kode berikut ini dan hapus:

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

3. Ganti kode diatas dengan kode script dibawah ini :

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 150px; /* untuk mengatur tinggi header (height) */}
#header {
width: 50%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#new_headerkanan {
float: right;
width: 50%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#new_headerkanan .widget {margin: 3px;}

4. Cari kode <div class='region-inner header-inner'> 

5. Copy kode script berikut ini tepat di samping kanannya.

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

6. Save!

Klik Layout/Tata Letak, maka header blog Anda sudah menjadi dua kolom. Kolom baru akan muncul di sebelah kanan. Silakan isi dengan iklan atau banner.

Header 2 Kolom

Itu dia Cara Membagi Header Blog Menjadi Tiga Kolom.

Cara Membagi Header Blog Menjadi Tiga Kolom

Bagaimana kalau mau menjadikannya tiga kolom? Ini caranya.

1. Klik Tema > Edit HTML
2. Cari (Ctrl+F) kode berikut ini:

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

3. Ganti kode di atas dengan kode berikut ini:

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 150px; /* untuk mengatur tinggi header (height) */}
#header {
width: 32%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;float: left; }
#new_headerkanan {
float: right;
width: 32%; /* mengatur lebar header kanan */
margin: 20px 10px 5px 10px;
padding: 2px;}
#new_headerkanan .widget {margin: 3px;}
#new_headerkanan2 {
float: right;
width: 32%; /* mengatur lebar header kanan 2*/
margin: 20px 10px 5px 10px;
padding: 2px;}
#new_headerkanan2 .widget {margin: 3px;}

4. Simpan kode berikut ini di samping kanan kode <div class='region-inner header-inner'>

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

Demikian Cara Membuat Header Blog 2 dan 2 Kolom di Template Simpla Blogger.*