Cara Membuat Header Menjadi 2 Kolom Di Blog

Kalau kita lihat header pada blogger bawaan akan terlihat satu kolom panjang yang terletak di bawah Nav Bar ...emang udah dari sono nya bentuk nya kayak gitu he he..ada suatu keinginan saya untuk membagi header menjadi dua kolom akhir nya saya cari di search engine dan setelah menemukan kode html trus saya coba untuk mengobok-obok blog saya ,,awal nya sih masih rada-rada susah maklum saya masih bodoh tentang kode-kode html dan setelah membanting tulang, memeras keringat dan menghabiskan berbatang-batang rokok ahh,,,akhir nya saya berhasil juga...

Bagaimana sih bentuk header dua kolom tersebut...kira-kira seperti sobat lihat di bawah ini....yang sebelah kiri merupakan header utama yang di potong sedangkan sebelah kanan header hasil potongan...ada keuntungan yang bisa kita ambil dengan adanya dua klom header ini mungkin kita bisa meletakan tulisan,gambar,maupun kode script di samping judul blog kita..


Di dalam postingan ini header yang akan di modifikasi adalah untuk blog yang memakai templete baru jika templete sobat memakai templete lama silahkan baca artikel selanjut nya di sini.

Jika sobat berminat untuk membelah header cara nya ga terlalu ribet cukup bawa pisau dapur atau celurit terus di belah bereskan..!!! he he sorry bercanda juragan....

Ok..!!! kita langsung aja mengikutin tahapan-tahapan nya...

1. Tahap PERTAMA

• Seperti biasa anda login terlebih dahulu..kalau sudah login silahkan langsung ke RANCANGAN
• Anda klik Edit HTML
• Sebelum nya anda download dulu templete agar jika ada kesalahan templete anda bisa di kembalikan seperti semula.
• Jangan lupa di centang Expand Template Widget
• Kalau sudah kita mulai mengobok-ngobok kode html nya

CARI KODE DI BAWAH INI..!!! cara cepat nya tekan (Ctr + F pada keyboard) fokus pencarian pada huruf .header-outer

.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;}

anda hapus kode di atas dan ganti (replace) dengan kode di bawah ini...

.header-outer { background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none;min-height: 154px; /* untuk mengatur tinggi header (height) */} #header { width: 45%; /* untuk mengatur lebar header kiri - title, description, image */ margin-right: 10px;float: left; } #bgsGR_headerkanan { float: right; width: 49%; /* mengatur lebar header kanan */ margin: 20px 10px 5px 10px; padding: 2px;} #bgsGR_headerkanan .widget {margin: 3px;}

2.Tahap KEDUA

Cari kode di bawah ini

<div class='region-inner header-inner'>

Terus anda tambahkan dengan kode di bawah ini.

<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

Hasil nya kayak di bawah ini.

<div class='region-inner header-inner'><b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

catatan :

• Untuk yang bercetak tebal merupakan kode yang di tambahkan tambahan
• Untuk yang bercetak merah angka nya bisa anda bisa ganti dengan angka 2,3,4 atau lain nya..maksud nya untuk susunan kolom kebawah.

3. Tahap KETIGA selesai dan simpan templete

Sekarang Lihat hasil nya...langsung anda kerancangan...semoga berhasil ya....jika ada kendala silahkan tinggalkan komentar nya di bawah...

Posted in: HTML-CSS Tricks