Model Kedua .
1. Membuat Kode css .
Silahkan hapus dulu kode css berikut
#header-wrapper {
width:960px;
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;
}
width:960px;
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;
}
Ganti dengan kode css yang ini :
Simpan dulu hasil kerja tadi.
2. Membuat ID Pemanggil .
Setelah kode css diatas tersimpan, selanjutnya membuat kode ID pemanggilnya. Untuk itu hapus dulu kode pemanggil yang lama seperti ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Anda (Header)' type='Header'/>
</b:section>
</div>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Anda (Header)' type='Header'/>
</b:section>
</div>
Ganti dengan kode ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Anda (Header)' type='Header'/>
</b:section>
<div id='header-kanan'>
<b:section class='header' id='header-kanan-atas' showaddelement='yes'>
</b:section>
</div>
<div id='header-kanan-bawah'>
<b:section class='header' id='header-bagian-kanan-bawah' showaddelement='yes'>
</b:section>
</div>
</div>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Anda (Header)' type='Header'/>
</b:section>
<div id='header-kanan'>
<b:section class='header' id='header-kanan-atas' showaddelement='yes'>
</b:section>
</div>
<div id='header-kanan-bawah'>
<b:section class='header' id='header-bagian-kanan-bawah' showaddelement='yes'>
</b:section>
</div>
</div>
Selesai. Simpan hasil kerja kita, sekarang coba lihat hasilnya.
**** Semoga Bermanfaat ****
5 komentar:
terimakasih, semoga saya bisa mencobanya.
tipsnya bikin pusing b-( ada yang ringkas dan praktis gak ? :-/
Kasih contoh atau gambar yang headernya telah dibagi jadi 2 kolom, dong... biar kita gak tebak-tebak hasilnya. Apa kedua kolom yang telah dibagi 2 bisa di buat judul blog atau uraian deskripsi blog yang berbeda?.
@dazbor
kalau cuma di baca nggak di coba ,ya pasti pusing oom ...:D
coba deh sambil dipraktekan ama template oom.
@ismangurukelas
kalau mau lihat contohnya dan hasil yang telah saya coba, coba deh klik link ini .
THANKS MAS BRO
http://pre-k2.blogspot.com/
Posting Komentar
Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.