Cara Membagi Dua Kolom Header Blog

Tips membagi kolom dua header ini saya mencarinya berbulan-bulan di berbagai blog bahkan nggak kehitung lagi saking banyaknya blog yang disinggahi. Kadang saya menemukan artikel membahas cara membagi dua kolom header tapi kode-kodenya yang disarankan tidak sama dengan kode template yang saya gunakan.

Hal ini mungkin terjadi karena template yang dipakai oleh bloger-bloger tidak sama. Tapi syukur apa yang saya angankan sudah tercapai. 

Nah.....sekarang giliran ryanoer Blog untuk mentransfer teknik atau tipsnya bagi lenga-lenga yang sudah sekian lama mencarinya tapi belum menemukannya. Namun sebelum mengimplementasikan kode-kode ini pada template blognya anda, saya ada saran sedikit sehubungan dengan kejadian yang saya alami tersebut.

Apabila blogger pemula ingin memakai kode-kode yang disarankan blog yang dikunjungi sebaiknya cek terlebih dahulu kecocokan kode-kodenya. Ini untuk menghindari kebingungan kelak nanti. Akan tetapi kalau kode-kodenya cocok kenapa tidak blog tersebut dijadikan sabagai referensinya. Dan saya kasih info sedikit tentang template yang pake ini adalah salah satu model Template blogger PT Keren Sekali.

Okey.... sekarang saya akan bahas trik membagi dua kolom Header blog. Namun sebelum itu akan dijelaskan sedikit tentang header ini. Mungkin ada dari pembaca Ahyar Blog bertanya dalam hati apa seh perlu dan manfaatnya membagi dua kolom header?. Kalau menurut saya dengan adanya kolom yang berposisi sejajar dengan header akan memperindah tampilan blog atau biar tidak kelihatan gersang pada bagian header blog. Dan disamping itu, siapa aja blog kita kelak nanti ada yang lirik untuk memasang iklan pada blognya kita. he,he,he mau dong.

Biar tidak bosan membacanya sekarang saya akan jelaskan detail langkah-langkah yang dapat ditempuh untuk membagi dua kolom header blog. Untuk menghindari kesalahan yang fatal terhadap template seumpamanya terjadi penempatan kode sebaiknya Templatenya di back up dulu alias dengan menggunakan download template pada bagian atas Edit HTML. Langkah-langkah yang diuraikan pada artikel ini adalah bloger sudah berada dalam posisi kendali blognya sendiri.

1. Klick Rancangan
2. Pilih HTML
3. Cari Kode : ]]>

4. Tempatkan kode berikut ini pas diatas kode yang latar hijau di atas ]]>

. Untuk memudahkan menemukannya tekan Ctrl F sehingga akan muncul dibagian kiri bawah layar komputernya lenga seperti gambar dibawah ini. Kalau sudah muncul masukan kode ]]> dalam teks box tersebut lalu enter. Apabila cocok maka kode tersebut akan muncul secara otomatis dengan warna hijau.

Ini contoh gambar yang muncul apabila menekan Ctrl F.

Ini kode yang dikopi

.header-outer { height: 103px; /* tinggi header - atas bawah */ } #header { width: 248px; /* besar ruang - title, description, image */ margin-right: 1px; } #by_headerkanan { float: right; width: 758px; /* lebar header ke kanan */ margin: 1px 2px 1px 2px; padding: 1px; } #by_headerkanan .widget { margin: 1px; }

5. Cari kode berikut ini

Catatan: Ahyar Blog yang tampak tersebut judul blog saya. Kenapa Ahyar Blog muncul karena memang ilustrasinya diambil dari blognya saya sendiri. Kode yang diperkenalkan ini sudah dimodifikasi sedikit dari sumbernya. Hal itu dilakukan untuk penyesuaian ukuran dan letaknya sesuai dengan Ahyar Blog.

6. Tempatkan berikut ini pas di atas kode yang diatas. Namun sebelum menempatkan kode tersebut sebaiknya spasi satu kali terlebih dahulu agar tidak kebinggungan nantinya. Bagi saya cara ini adalah untuk memudahkan melihat letaknya.

Ini kode yang dikopi.
<b:section class='by_headerkanan' id='by_headerkanan' maxwidgets='1' showaddelement='yes'/>

Tempatkan kode di atas sehingga akan tampak seperti di bawah ini:

7. Klick Simpan Template untuk menyimpan perubahan

Setelah melakukan langkah-langkah yang diuraikan di atas Klick Rancangan untuk melihat hasilnya pada halaman Dasbor blog. Sementara cara menyimpan kode script Iklan atau lain-lainnya langkahnya seperti menempatkan kode pada gadget HTML/JavaScript