Membuat Header Blog Menjadi Dua Kolom

Membuat Header Blog Menjadi Dua Kolom - Secara umum, sebuah blog memiliki header hanya dengan satu kolom sehingga dengan hanya memiliki satu kolom tersebut maka pada bagian header blog ini hanya berisi judul dan deskripsi blog. Sedangkan untuk tata letak dari isi header, secara umum juga terletak disebelah kiri dan tengah. Dari satu kolom, apakah kolom header blog bisa ditambah? Tentu bisa, yaitu header blog menjadi dua kolom

Berbeda dengan membuat satu atau dua kolom diatas atau dibawah header atau yang disebut widget blog, membuat dua kolom ini benar-benar berada didalam header, bukan diatas atau dibawah dan bukan sebuah widget. Sehingga dengan kata lagi membagi header menjadi dua. Maksudnya? Apakah dengan menjadikan header blog ini menjadi dua kolom, blog akan memiliki dua heading, H1 dan H2? Tentu saja tidak karena untuk bagian yang lain akan dijadikan sebagai kolom untuk menempatkan berbagai konten, misalnya iklan. Sedangkan untuk bagian yang lainnya tetap menjadi milik heading blog tersebut yaitu H1

Salah satu contoh header blog yang memiliki header 2 kolom adalah pada bagian header blog ini, yaitu sebelah kiri adalah judul dan deskripsi blog dan sebelah kanan adalah kolom pencarian. Atau seperti contoh pada gambar berikut ini

Berikut Cara Membuat Header Blog Menjadi Dua Kolom :
Untuk membuat header blog menjadi 2 kolom ini, saya tidak memberikan ketentuan khusus karena setiap kode header yang ada di template blog memiliki perbedaan. Namun secara dasar setiap template memiliki id header dengan kode #header dan id #header ini ditempatkan dalam satu element #header-wrapper atau lebih sederhananya sebagai berikut;

#header-wrapper {
#header {

Element #header memiliki lebar sesuai dengan lebar terluar dari element #header-wrapper, sehingga untuk membagi header blog menjadi 2 kolom, cukup membagi id #header menjadi 2 dan mengganti namanya menjadi nama yang berbeda, dan contohnya seperti berikut ini

#header-wrapper {
#header {
#header-right {

Lalu bagaimana untuk mengatur lebar dan jarak tepi (baca: margin padding) untuk dua kolom header ini? Karena id #header ini berada dalam element element #header-wrapper maka untuk mengatur lebar jangan sesuaikan dengan lebar element #header-wrapper tapi bagilah menjadi 2 bagian yang memiliki jarak antar tepinya

#header-wrapper {width:980px;}
#header {float:left;width:450px;text-align:left;}
#header-right {float:right;width:510px;text-align:left;}

Dari kode sederhana diatas, saya belum memberikan jarak tepi (margin padding) dari 2 kolom header tersebut. Hanya membagi lebar dan letak dari kolom tersebut yaitu float dan width. Float untuk kolom header kiri adalah left dan lebar untuk kolom kiri adalah 450. Untuk mengatur margin padding (jarak tepi) silahkan baca caranya di Margin Padding Blog
Jadi saya tidak akan memasangkan margin atau padding dalam kode diatas karena itu harus menyesuaikan antar kode di id #header dan #header-right. Namun sebagai acuan agar tampilan 2 kolom header ini sama, coba pasangkan kode margin di id #header-right seperti berikut ini

#header-wrapper {width:980px;}
#header {float:left;width:450px;text-align:left;}
#header-right {float:right;width:510px;text-align:left;margin:5px 0px;}

Ingat, margin pada id #header-right ini hanya sebagai acuan, silahkan diganti untuk menyesuaikan agar tampilannya sama atau sejajar dengan id #header. Kenapa saya tidak menetapkannya sebagai kode utama? Selain tiap kode template berbeda, hal ini juga menyesuaikan dengan id-id yang lain yang ada didalam id #header. Di id #header masih ada beberapa id lagi yaitu #header h1, #header a, #header p, #header .description dan #header img

Setelah mengganti kode CSS header blog diatas, tambahkan juga kode HTML id #header-right tersebut, seperti contoh berikut ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Info Template Blogger (Header)' type='Header'>
<b:includable id='main'>
Disini ada kode header h1, header a, header p, header .description, header img
</b:includable>
</b:widget>
</b:section>
<div id='header-right'>
<b:section class='header' id='header2' preferred='yes'/>
</div><div class='clear'/>
</div>

Jadi, sesuaikan dengan kode header yang ada di template blog karena artikel blog ini hanya sebatas penjelasan umum saja bukan secara khusus untuk mengganti header blog. Dan jika ada pertanyaan silahkan tinggalkan komentar anda untuk artikel ini, Membuat Header Blog Menjadi Dua Kolom

Membuat Header Blog Menjadi Dua Kolom 2013-08-20T10:34:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni