Membagi Header Menjadi Dua Kolom

Alhamdulillah hari ini bisa update lagi setelah beberapa hari asyik ngotak ngatik CSS dan belajar menggunakan beberapa program (Adobe Photoshop, Corel Draw X4, DreamLight Photo Editor dan PhotoShine) yang baru saya instal dilaptop kesayangan, yang tentu program itu saya harapkan bisa membantu saya lebih kreatif lagi dalam mendesain template kedepan dan menggunakannya pada hal-hal lain yang juga memeberi maslahat.

Tutorial sebelumnya kita sudab membahas Menambah Elemen diatas dua Kolom. Dan kali ini kita akan belajar cara Membagi Header Menjadi Dua Bagian.
Berikut langkah-langkahnya:

1. Seperti biasa dalam keadaan log in pada account sobat
2. Klik Tata Letak
3. Klik Edit HTML
4. Bisa Download Template Lengkap jika khawatir gagal
5. Sekarang cari kode CSS seperti beikut:

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

6. Ganti semua kode diatas dengan kode berikut:

/* Header
----------------------------------------------- */
#header-wrapper {
width:930px;
margin:0 auto 0px;
background:#ffff;
height:180px;
}
#header-one {
width:50%;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}
#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}
#header_two{
width:50%;
float:left;
padding-top:10px;
}

Perhatikan kode yang berwarna merah pada bagian awal, sesuaikan lebar atau angka widht dengan lebar header template sobat.
7. Sekarang cari kode seperti berikut:

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

8. Setelah menemukan kode diatas, sisipkan kode warna merah berikut dengan penempatan yang menyarupai contoh dibawah ini:

<div id='header-wrapper'>
<div id='header-one'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tempat Eksperimen Kecil (Header)' type='Header'/>
</b:section>
</div>
<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

9. Klik Simpan Template
10. Selesai
Untuk melihat hasil, klik elemen halaman, jika tampilan header sobat-sobat sekalian serupa screenshoot diatas, berarti eksperimennya berhasil. Silahkan isi kolom baru dengan ragam

sumber : http://amatullah83.blogspot.com/
Previous
Next Post »

3 komentar

Click here for komentar
vizzen
admin
27 February 2011 at 06:53 ×

ziiiip ijin baca ya kang fatur maklum newbie

Reply
avatar
rifai
admin
1 April 2011 at 12:13 ×

assalamualaikum sob, saya pakai TEMPLATE DESIGN dari blogger cek disini ya sob http://beritahotbangrifai.blogspot.com

saya pengen bagi header jadi 2 tp waktu aku cari codenya pakai CTRL+F gag ada semuanya tolongin ya sob

Reply
avatar
Gudang Elmu
admin
2 April 2011 at 18:31 ×

@rifai Cari Kode CSS Header sob trus ganti dengan yg ini, trus cari kode selanjutnya gampang kok, memang setiap template pasti berbeda kode sob tapi kita cukup cari yang mirip2 aja OK

Reply
avatar
Thanks for your comment