Label Cloud

Search This Blog

17 February 2010

online counter Membuat 3 column Di Ruangan Bawah

Assalamualaikum . . Sebelum ini Msue ade berkongsi ngan korang bagaimana hendak membuat 2 column pada ruangan atas . Kali ini Msue ingin berkongsi pula ngan korang bagaimana hendak membuat 3 column pada ruangan bawah . Tutorial ini di buat khas atas pentanyaan yang dibuat oleh Cik Iza . Kalau korang hendak ikut membuatnya . Dipersilakan .

1. Login ke Blogspot .

2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)

3. Cari kod di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .


<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>



4. Gantikan kod yang di highlight tersebut ngan kod di bawah .


<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
</p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>



5. Cari kod di bawah ini .


</b:skin>



6. Copy kod di bawah ini dan pastekan di atas atau sebelumnya .



#footer-column-container {
clear:both;
background: #000000;
line-height: 1.4em;
margin:auto;
height: 200px;
border: 1px solid #FF6699;
width: 900px;
margin-bottom: 10px;
}

#footer-column-container h2 {
margin: .5em 0 .5em;
padding: 4px 5px;
font-size: 12px;
font-family: Comic Sans MS;
color: #FF0000;
background: #000000;
padding: 5px;
margin-top: -1px;
}

.footer-column {
padding: 10px;
}



Note: Tukarkan yang di highlight mengikut kehendak korang .



7. Preview dan Save Template jika tiada error .



Via - Muncet





Tinggalkan Komen Anda Disini