Saturday, November 12, 2011

Cara Membuat Header Blog Menjadi Dua Kolom di Blogspot

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
Jika langkah diatas sudah dilakukan, selanjutnya kita cari kode  .header-outer(untuk lebih mudahnya gunakan Ctrl+F dalam melakukan pencarian)

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)

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



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