Label Cloud

Search This Blog

02 December 2010

online counter Semudah ABC Membina Right Header

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 .
Header Yang Ada Follower didalamnya





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
Tinggalkan Komen Anda Disini