ehm.... kalo di perhatikan header blog ini juga ada dua lho... bagian kiri adalah judul blog TuCoCor dan bagian kanan adalah kotak search engine. untuk yang belum berpengalaman nguprek-nguprek HTML di blog spot saya maungasih tau Cara Membuat Header Blog Menjadi Dua Kolom di Blogspot karena banyak juga yang ngeluh tentang header yang gitu gitu aja. jadi saya maungasih solusi buat para pecinta TuCoCor. Gini nih caranya
- Login Blogger
- Pilih Rancangan
- Pilih Edit HTML ( jangan lupa untuk selalu backup template setelah memasuki langkah ini )
- Beri tanda Centang pada Expand Widget Template
Maka akan tampak kode seperti ini :
.header-outer {
margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}
(kode bisa saja berbeda-beda untuk masing-masing template)margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}
Hapus kode diatas gantikan dengan kode berikut :
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 126px;width:930px;margin:0 auto 0px;border:1px solid ; /* untuk mengatur tinggi header (height) */}
#header {
width: 59%;height: 105px; margin: 10px;padding: 0px;float: left;border:1px solid ;/* untuk mengatur lebar header kiri - title, description, image */}
#bgsGR_headerkanan {
float: right;
width: 36%;height: 105px;border:1px solid ; /* mengatur lebar header kanan */
margin: 10px;
padding: 0px;}
#bgsGR_headerkanan .widget {margin: 0px;}
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 126px;width:930px;margin:0 auto 0px;border:1px solid ; /* untuk mengatur tinggi header (height) */}
#header {
width: 59%;height: 105px; margin: 10px;padding: 0px;float: left;border:1px solid ;/* untuk mengatur lebar header kiri - title, description, image */}
#bgsGR_headerkanan {
float: right;
width: 36%;height: 105px;border:1px solid ; /* mengatur lebar header kanan */
margin: 10px;
padding: 0px;}
#bgsGR_headerkanan .widget {margin: 0px;}
Nah untuk menjalankan perintah diatas langkah berikutnya kita cari kode :
<div class='region-inner header-inner'>
Kalau sudah ketemu tambahkan kode berikut :
<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
Beginilah kira2 hasilnya :
<div class='region-inner header-inner'> <b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>
Ok , langkah terakhir Simpan Template kamu dan lihat hasilnya.
Semoga berhasil dan sukses selalu.
0 comments:
Post a Comment