Cara Gampang Membagi Header Blog Menjadi Dua Kolom

Sesuai dengan judul Cara Gampang Membagi Header Blog Menjadi Dua Kolom, pada dasarnya template blog bawaan blogger itu biasanya hanya punya satu kolom di header, sehingga hanya bisa menyimpan nama atau logo blog di sana.

Cara berikut ini akan memandu bagaimana cara membagi header blog menjadi dua bagian, Langsung aja berikut ini caranya:

Cara Pertama :
1. Template > Edit HTML
2. Cari (Ctrl+F) kode yang penampakkannya seperti berikut ini:

<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
</div>

3. Copy & Paste kode berikut ini di antara kode </b:section> and </div>

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Hasilnya seperti ini:

<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>
</div>

4. Copy + Paste kode berikut ini di atas atau sebelum kode ]]></b:skin>

#header, body#layout #header {width:300px;display:inline-block;float:left;}

#header-right, body#layout #header-right {width:468px;display:inline-block;float:right;padding:15px;}

#header-right .widget {margin:0;}

Keterangan :

Untuk angka 300 (untuk space nama blog/logo di kiri) dan 468 (untuk space iklan di kanan) bisa diubah. Kalau ragu, biarkan seperti itu.

5. Save template!

Jika sudah selesai silahkan cek :
1.  Klik Layout

2. Akan muncul kolom buat Widget baru HTML/Javascript di bawah Header seperti gambar di bawah.

Edit dan masukkan kode iklan atau url gambar di sana yang akan muncul di samping logo/nama blog.

Cara Kedua :

Jika cara di atas gagal, atau kode-kodenya beda dengan tips di atas, coba gunakan cara lain berikut ini.

1. Template > Edit HTML
2. Cari kode <b:section class='header'> seperti dalam gambar di bawah ini:

3. Copy & Paste kode berikut ini di atas atau sebelum kode <b:section class='header'> yang dikasih highlight kuning di atas:

<div class='swt-blogheader'>

4. Copas kode berikut ini sebelum atau di atas kode </b:section> yang dihighlight grey di atas:

<b:section class='swt-blogheader-right' id='swt-blogheader-right' maxwidgets='1' showaddelement='yes'>
</b:section>
</div>
<!-- /swt-blogheader -->
<div style='clear: both'/>

5. Copas kode berikut ini di atas kode ]]></b:skin>

.swt-blogheader {position: relative;width: 100%;}
#header {padding: 0;margin:0;overflow:hidden;float:left; width:35%;}
#swt-blogheader-right {padding: 0;margin:0;overflow:hidden;float:right;width:65%;}

Angka 35% (untuk logo/nama blog) bisa diubah menjadi 300px. Angka 65% (untuk space iklan di kanan) bisa diubah menjadi 468px. Sesuaikan aja dengan lebar keseluruhan headernya.

6. Save Template!

7. Klik Layout, maka akan tampak seperti ini:

Silakan klik "Add a Gadget" dan isi dengan kode iklan atau url gambar. Jika menampilkan gambar, maka kodenya adalah seperti ini:

<a href="URL_LINK"><img src="URL _GAMBAR" />

URL_LINK = link yang terbuka jika gambar diklik

URL _GAMBAR = ya... Url gambar yang dimunculkan di sana :) Simpan dulu gambarnya di Picasa Web Google, lalu copy link addressnya (image url link).

Demikianlah  Cara Gampang Membagi Header Blog Menjadi Dua Kolom, semoga bermanfaat.