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.. dan mungkin sobat udah bosan dengan tampilan seperti itu.. tapi tenang saja 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..
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 langkah-angkah nya...
1. LANGKAH 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
bercetak tebal
.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. LANGKAH KEDUA
Cari kode di
bawah ini
<div class='region-inner header-inner'>
Terus anda tambahkan dengan kode di bawah in...
<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. LANGKAH KETIGA selesai dan simpan templete
Sekarang
Lihat hasil nya... langsung anda kerancangan... selamat mencoba....