Cara Membagi Header Blog Menjadi Dua Bagian Terpisah

Halo Sobat blogger KangBisson semuanya, apa kabar? gimana dengan blognya? semoga makin faham dan semakin ngefans sama aktivitas bloggingnya

Seperti yang kita tahu, template bawaan dari blogspot biasanya memang hanya memiliki satu kolom header saja yang mungkin menurut sebagian blogger terasa kurang untuk mengekspresikan kebanggaannya memiliki sebuah logo dan font judul blog yang keren karena tidak bisa ditampilkan secara berbarengan di header yang hanya memiliki satu kolom tersebut

Nah pada artikel kali ini kita akan belajar cara membagi header blog menjadi dua bagian / dua kotak yang mana nantinya bisa sobat manfaatkan untuk memisahkan antara gambar header dengan tulisan judul blog ataupun bisa juga dipadukan dengan widget lain, pokoknya nanti bisa sobat sesuaikan dengan keperluan

Berhubung saya mencoba tutorial ini dari dua sumber yang berbeda, maka disini cara pembuatannya akan saya bagi menjadi dua agar sobat bisa mencobanya satu persatu di blog sobat jika salahsatunya tidak cocok

Ok .. kita langsung ke tutorial

CARA PERTAMA (Ini yang saya pakai dan berhasil diterapkan di blog saya):

1. Masuk akun blogger sobat, kemudian klik Theme/ Template >> Edit HTML

2. Cari kode berikut (Gunakan Ctrl+F untuk memudahkan pencarian):

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

Atau kode berikut :

<b:includable id='title'>

<b:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl'name='a'>

<data:title/>

</b:tag>

</b:includable>

</b:widget>

</b:section>

Intinya cari saja kode yang mirip-mirip seperti kode diatas sampai dengan kode </b:section>

3. Copy + Paste kode dibawah ini kemudian tempatkan kodenya tepat dibawah kode </b:section> tadi

<b:section id='header-right' showaddelement='yes'/>

<div style='clear: both;'/>

Sehingga hasil akhirnya akan terlihat seperti dibawah:

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

4. Selanjtnya, 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;}

Catatan : Ukuran kolom tersebut bisa sobat edit lagi agar sesuai keinginan, atau biarkan seperti itu saja biar ga pusying

5. Sip ... proses pengkodean untuk membuat header menjadi dua kolom sudah selesai, silahkan Save Template.

Untuk memastikan prosesnya berhasil, silahkan masuk ke menu Layout / Tata Letak

Jika berhasil, maka tampilannya akan seperti gambar dibawah

6. Selanjutnya sobat tinggal mengisi kolom-kolom tersebut dengan gambar atau tulisan yang sobat inginkan atau silahkan bergembira dulu karena anda sudah memiliki header dua kolom 😁😁😁

CARA KEDUA (Yang ini belum saya coba, kalo cara diatas gagal silahkan coba cara dibawah):

1. Cari kode ini:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Judul Blog Anda (Header)' type='Header'/>

</b:section>

2. Jika ketemu, tempatkan kode berikut dibawah kode tadi:

<b:section id='header-right' showaddelement='yes'/>

<div style='clear: both;'/>

Sehingga hasilnya akan seperti dibawah:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Judul Blog Anda (Header)' type='Header'/>

</b:section>

<b:section id='header-right' showaddelement='yes'/>

<div style='clear: both;'/>

3. Cari kode ]]></b:skin>. Copy kode dibawah dan Paste-kan tepat diatas kode ]]></b:skin> tadi

#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%;}

4. Cari kode ]]</b:template-skin>. Copy kode dibawah kemudian Paste-kan tepat diatas kode ]]</b:template-skin> tadi

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

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

5.  Selesai, Save Template !!! Coba lihat hasilnya, berhasilkah? kalo tidakpun jangan salahkan saya karena saya juga tidak menggunakannya ... hhehee

Ok Friends, demikianlah artikel saya kali ini tentang Cara Membagi Header Blog Menjadi Dua Bagian Terpisah smoga sobat berhasil membuat headernya menjadi dua kolom, kalo gagal berarti ada yang salah tuh di agan nya 😇

Terimakasih dan happy blogging

Referensi: contohblog.com, rogmunt.blogspot.com