Cara Membuat Header Menjadi Dua Kolom/Membagi Dua

Baca Juga

Hallo blogger...
Teringat lagi deh, sekitar 2 minggu lalu sebelum artikel ini saya tulis, saya pada pusing membagi dua header template blog ini, awalnya saya ingin membagi header karena kelihatan lebih keren. Dimana pada H1/judul bisa saya ubah menjadi gambar simbol blog ini, dan disampingnya iklan. Namun pada akhirnya saya tidak berhasil juga, saya cari tips-tips di google hingga sekitar 30 artikel yang mengulas cara membagi dua header blog namun satupun tidak ada yang membantu saya. Akhirnya saya jadi ganti template lagi deh....
Dan menjadikan trafik blog ini berkurang, namun berharap tidak akan pernah mengganti template lagi..
Namun blog saya yang lain, templatenya bisa di edit agar menjadi 2 kolom, namun tidak sepenuhnya dengan bantuan blog lain, karena ada yang kurang lengkap jadi saya tambah deh dengan teknik lain dengan pengetahuan HTML dan CSS saya, dan saya harap anda akan berhasil melalui blog ini.
header satu kolom akan menjadi dua kolom seperti gambar ini


dan kita langsung ke tipsnya :

1. Masuk ke dashboard, klik Template, klik Edit HTML
2. Cari kode yang mirip seperti berikut :
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
tidak semua template kodenya sama persis dengan diatas, namun anda pasti dapat melihat kode yang strukturnya mirip dengan kode diatas.
Lalu Hapus kode tersebut dan hanya kode yang mirip seperti diatas dan gantikan menjadi kode berikut :

<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>

3. Kemudian silahkan copy lalu pastekan kode berikut ini tepat sebelum atau di atas 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;}

perhatian :
angka 300 : untuk space gadget nama atau logo blog anda (sebelah kiri)
angka 468 : untuk space gadget yang anda inginkan di blog (sebelah kiri)
boleh diganti sesuai keinginan dan kebutuhan anda.

Klik SIMPAN TEMPLATE

sekarang untuk memastikan apakah sudah terbagi dua, klik Tata Letak/Layout.
Jika anda berhasil, maka kolom widget header sudah terbagi dua.
Dan coba anda isi header sebelah kiri dengan gambar/logo blog anda, dan sebelah kanan bebas, untuk space iklan, PPC, adsense, dll.

Namun bagi beberapa template, ada juga yang tidak berhasil. Bahkan berubah menjadi diatas dan dibawah, itu biasa, masih bisa kok diatasi!
Berikut tipsnya :

1. Pergi kembali ke halaman Edit HTML, lalu cari kode berikut ini :
<b:section class='header'>
2. Copy lalu Paste kode berikut ini sebelum atau diatas 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>

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

5. Copy lalu pastekan kode dibawah 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%;}


perhatian!
Angka 35% : untuk logo atau nama blog (bisa diubah menjadi 300px).
Angka 65% : untuk space iklan di kanan (bisa diubah menjadi 468px).
Sesuaikanlah dengan lebar keseluruhan headernya dari kanan ke kiri (bayangkan saja letaknya)

terkahir SIMPAN TEMPLATE
pasti berhasil!

Catatan :
Jika anda tidak berhasil, mungkin saja CSS dan jenis Elemen template anda memang berbeda dengan yang sudah saya praktekkan, untuk menanggapi hal ini sebaiknya anda mengganti dengan template yang valid HTML5, valid CSS3. Namun saya yakin dengan template biasa-biasa saja asalkan template-template yang baru dikeluarkan pasti berhasil

nah, demikianlah postingan saya, semoga bermanfaat!

Judul	Cara Membuat Header Menjadi Dua Kolom/Membagi Dua
Author	Suhanri Simanullang
Author Rating	4/ 5 Suara Dari 1201 Ulasan