Tutorial: 2 Kolum Pada Header

Salam kembali. Hampir sebulan aku tak update blog ni. Maaf sangat-sangat. Aku menyibukkan diri dengan WordPress. Bertapa selama hampir sebulan untuk belajar php coding pula. Masih banyak lagi yang perlu dipelajari. Terima kasih kepada yang still menziarahi blog ni walaupun tanpa sebarang update. Bersyukur juga kerana still dalam search engine seperti Google, rank blog aku ni agak baik dari segi carian keyword.

Oh ya, setelah belajar sedikit sebanyak tentang WordPress, aku dah pun ada domain sendiri. AirielKayz.com. So, kalau ada kesempatan, jenguk-jenguk la blog rasmi personal aku tu. Komen dan pendapat dari korang memang aku amat hargai. Macam mana aku dapat domain tu, ada aku cerita di blog tu. Daftar la jadi ahli kat blog aku tu kalau sudi. Hehehe..

Balik kepada topik, kali ni, tutorial yang aku nak beri adalah tentang 2 kolum pada header. Iaitu kita "pecahkan" header blog kita menjadi 2 kolum.

Contoh 2 Kolum Header

 Contoh 2 Kolum Header Untuk Add Widget

Kenapa nak ada 2 kolum pada header? Ada banyak kelebihan 2 kolum pada header. Kalau dilihat pada contoh gambar di atas, boleh dilihat aku meletakkan saiz banner iklan yang berukuran 728x90. Ini sesuai untuk mereka yang ingin optimiskan pengiklanan di blog. So, boleh la korang letak banner Nuffnang ke, Advertlets ke atau apa-apa saja banner yang berukuran saiz maksima 728x90 (aku agak je saiz maksima tu sebab aku takde banner yang lebih besar dari tu).

Caranya?

1- Pergi ke Dashboard >> Layout >> Edit HTML dan anda cari(ctrl+F) kod seperti di bawah:-

/* Header----------------------------------------------- */

#header-wrapper {width:960px;margin:0 auto 0px;height:120px;}

#head-inner {width:230px;background-position: left;margin-left: auto;margin-right: auto;float:left;}

#header {margin: 0px;text-align: left;color:#ffcc66;}

2- Highlightkan semua kod tersebut dan gantikan dengan kod di bawah:-

/* Header----------------------------------------------- */

#header-wrapper {width:960px;margin:0 auto 0px;height:120px;}

#head-inner {width:230px;background-position: left;margin-left: auto;margin-right: auto;float:left;}

#header {margin: 0px;text-align: left;color:#ffcc66;}

#r_head{width:730px;float:left;}

3- Selepas itu, cari pula kod seperti di bawah:-

<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/></b:section></div>

4- Gantikan kod di atas dengan kod di bawah:-

<div id='header-wrapper'><div id='head-inner'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/></b:section></div><div id='r_head'><b:section class='header' id='header2' preferred='yes'/></div></div>

5- Selepas puas hati, klik preview atau terus save. Then lihat hasilnya.
Selesai.
Untuk demo, boleh lihat di SINI.

Adios...