17 February 2010
Membuat 3 column Di Ruangan Bawah
hak milik
Sue
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
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
