Tips Membagi Header 2 Kolom Template Designer

Blogger Template designer memiliki kode yang berbeda dengan kode lama. Karena masih baru sehingga banyak para blogger mania yang bingung untuk memodifikasi template blogger yang baru.

Beberapa waktu yang lalu Blog Brugkembar mencoba ganti template memakai template blogger yang baru.  Karena ada sedikit perbedaan kode html dan itu masih asing alias belum akrab sehingga seluruh gadget yang telah terpasang rapih menjadi berantakan.

Saya termasuk pecinta header 2 kolom, satu di kiri dan satunya lagi di kanan.  Sedangkan Blogger template baru tidak menyediakan template dengan header yang 2 kolom. Ketika hendak membagi header, saya mencoba menerapkan tips yang lama ternyata tidak berhasil. Setelah berkelana kesana kemari akhirnya kutemukan juga blog yang memposting tentang cara membagi header di blogger baru. Lewat kesempatan ini saya ingin mengucapkan terima kasih sebanyak-banyaknya kepada :

1. http://gubhugreyot.blogspot.com/
2. http://oentoe09.blogspot.com/

Berkat jasa beliau-beliau akhirnya saya dapat membagi header.  Tips yang beliau tulis belumlah 100% memuaskan saya, alias masih ada kekurangan tetapi sudah cukup membuat pintu kreativitas saya menjadi terbuka, sekali lagi saya ucapkan banyak terima kasih.

Maklum saya bukanlah orang yang ahli dalam bidang kode mengkode, juga tanpa didasari ilmu tentang blog, hanya berbekal nekad dan semangat pantang menyerah akhirnya terpecahkan juga misteri kode blogger baru.  Meskipun memakan waktu yang cukup lama (1 minggu lebih) tetapi saya bangga dengan hasil yang saya capai.

Nah, sebagai ungkapan rasa bangga ini pada tutorial kali ini saya coba amalkan hasil perjuanganku selama ini kepada pembaca sekalian.  Khusunya tips mengenai cara membagi header 2 kolom pada template designer blogger.  Ketika dilakukan pecobaan, saya memakai template simple buatan Josh Peterson.  Lebar (width) saya tambah menjadi 1007px.

Bagi yang mau mencoba tips ini, silahkan ikuti langkah berikut ini:

1. Mencari Kode :

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

2. Seluruh Kode tadi saya hapus dan ganti dengan kode 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;}

3. Selanjutnya cari kode :
   

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

4. lalu menempatkan kode berikut ini di bawah kode no.3:
   

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

5. Save dan hasilnya bisa kita lihat seperti gambar di bawah ini: