Cara Membahagikan Header Blog Kepada Dua Kolum

Panduan ini saya kongsikan untuk rakan blogger yang menggunakan template jenis simple. Ia untuk membahagikan header blogspot kepada dua kolum. Ini memudahkan anda meletakkan iklan ataupun logo blog di ruangan baru.

Sebelum mengedit template, anda disarankan untuk backup template terlebih dahulu.

1. Log masuk ke Blogger Dashboard > Design > Edit HTML

2. Tak perlu tick pada Expand Widget Template. 

3. Kemudian, cari kod ini :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Test  Blog (Header)' type='Header'/>
</b:section>

4. Copy kod ini dibawahnya :

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

5. Ia akan kelihatan seperti ini :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tweak My  Blogger (Header)' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

6. Langkah seterusnya , cari kod ini di template anda :

]]></b:skin>

7. Letakkan kod ini tepat diatas ]]></b:skin>

#header {display:inline-block;_float:left;}
#header-right {display:inline-block;float:right;padding:15px 15px 15px 15px;}
#header-right .widget {margin:0;}
body#layout #header {width: 50%;}
body#layout #header-right {width: 50%;}

8. Sekarang cari kod ini :

]]> </b:template-skin>

9. Letak kod ini tepat diatasnya;

#layout #header {width: 50%; float: left;}
#layout #header-right {width: 50%; float: right;}

Selesai !
Hasilnya tidak akan dapat dilihat melalui preview template. Kod ini perlu disavekan dahulu. Dan, anda akan melihat header blog anda terbahagi dua di Layout blog.