02 December 2010
Semudah ABC Membina Right Header
hak milik
Sue
Assalamualaikum , Hari ini Msue ingin berkongsi bagaimana hendak Membina Right Header Semudah ABC. Tujuannya korang boleh memasukkan apa - apa di dalam header . Ia akan membuatkan header korang lebih menarik berbanding biasa .
1. Login ke Blogspot .
2. Klik Design - Edit HTML(Tandakan pada Expand Widget)
3. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
4. Tambahkan kod di bawah ini di dalamnya .
width: 300px;
float: left;
Ia akan jadi seperti ini
#header {
width: 300px;
float: left;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Note:# header korang kene dikecilkan sedikit supaya ade ruang untuk right header yang korang nak letak . nilai width:300px korang boleh tentukan sendiri . float:left adalah kedudukan header korang yang asal.msue letakkannya dibahagian kiri
5. Copy kod di bawah dan pastekan di bawahnya (no. 3)
#rightheader {
margin: 5px;
width: 300px;
float: right;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
6. Cari kod di bawah ini .
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Korang (Header)' type='Header'/>
</b:section>
</div>
7. Copy kod di bawah
<b:section class='header' id='rightheader' showaddelement='yes'>
</b:section>
8. Pastekannya seperti di bawah
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Anda (Header)' type='Header'/>
</b:section>
<b:section class='header' id='rightheader' showaddelement='yes'> </b:section>
</div>
Hasilnya seperti di bawah
Note: Korang boleh padamkam border: 1px solid $bordercolor; jika korang tidak mahu border pada #header dan juga #rightheader
Via - Muncet
1. Login ke Blogspot .
2. Klik Design - Edit HTML(Tandakan pada Expand Widget)
3. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
4. Tambahkan kod di bawah ini di dalamnya .
width: 300px;
float: left;
Ia akan jadi seperti ini
#header {
width: 300px;
float: left;
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Note:# header korang kene dikecilkan sedikit supaya ade ruang untuk right header yang korang nak letak . nilai width:300px korang boleh tentukan sendiri . float:left adalah kedudukan header korang yang asal.msue letakkannya dibahagian kiri
5. Copy kod di bawah dan pastekan di bawahnya (no. 3)
#rightheader {
margin: 5px;
width: 300px;
float: right;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
6. Cari kod di bawah ini .
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Korang (Header)' type='Header'/>
</b:section>
</div>
7. Copy kod di bawah
<b:section class='header' id='rightheader' showaddelement='yes'>
</b:section>
8. Pastekannya seperti di bawah
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Anda (Header)' type='Header'/>
</b:section>
<b:section class='header' id='rightheader' showaddelement='yes'> </b:section>
</div>
Note: Korang boleh padamkam border: 1px solid $bordercolor; jika korang tidak mahu border pada #header dan juga #rightheader
Via - Muncet