10 February 2010
Membuat 2 Column Di Ruangan Atas
hak milik
Sue
Assalamualaikum , Sebelum balik kampung malam nie Msue ingin berkongsi ngan korang bagaimana membuat 2 column di ruangan atas .
1. Login ke Blogspot .
2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)
3. Sebelum itu pastikan #header-wrapper , #outer-wrapper , #footer korang bersaiz (width: 900px;)ke atas . Jika kurang dari 900px korang boleh ejas width atau saiz yang sesuai .
4. Cari kod seumpama di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .
#footer {
width: 988px;
----
----
}
4. Copy kod di bawah dan pastekan di bawah kod tersebut .
/* Upper-column
----------------------------------------------- */
#upper-column-container {
clear:both;
background: #000000;
line-height: 1.4em;
margin:auto;
height: 200px;
border: 1px dotted #666666;
width: 940px;
margin-bottom: 10px;
}
#upper-column-container h2 {
margin: .5em 0 .5em;
padding: 4px 5px;
font-size: 12px;
font-family: verdana;
color:$sidebarcolor;
background: #eeeeee;
padding: 5px;
margin-top: -1px;
}
.upper-column {
padding: 5px;
}
Note: Pada highlight korang tukarkan mengikut kesesuian . #upper-column-container adalah keseluruhan column , manakala #upper-column-container h2 adalah tajuk pada column .
5. Cari kod di bawah .
<div id='main-wrapper'>
6. Copy kod di bawah dan pastekan di atasnya .
<div id='upper-column-container'>
<div id='upper1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='upper-column' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='upper2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='upper-column' id='col2' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
7. Preview dan Save Template jika tiada error .
Via - Muncet
1. Login ke Blogspot .
2. Klik Layout - Edit HTML(Tandakan pada Expand Widget)
3. Sebelum itu pastikan #header-wrapper , #outer-wrapper , #footer korang bersaiz (width: 900px;)ke atas . Jika kurang dari 900px korang boleh ejas width atau saiz yang sesuai .
4. Cari kod seumpama di bawah(Gunakan CTRL+F untuk memudahkan korang mencarinya .
#footer {
width: 988px;
----
----
}
4. Copy kod di bawah dan pastekan di bawah kod tersebut .
/* Upper-column
----------------------------------------------- */
#upper-column-container {
clear:both;
background: #000000;
line-height: 1.4em;
margin:auto;
height: 200px;
border: 1px dotted #666666;
width: 940px;
margin-bottom: 10px;
}
#upper-column-container h2 {
margin: .5em 0 .5em;
padding: 4px 5px;
font-size: 12px;
font-family: verdana;
color:$sidebarcolor;
background: #eeeeee;
padding: 5px;
margin-top: -1px;
}
.upper-column {
padding: 5px;
}
Note: Pada highlight korang tukarkan mengikut kesesuian . #upper-column-container adalah keseluruhan column , manakala #upper-column-container h2 adalah tajuk pada column .
5. Cari kod di bawah .
<div id='main-wrapper'>
6. Copy kod di bawah dan pastekan di atasnya .
<div id='upper-column-container'>
<div id='upper1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='upper-column' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div id='upper2' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='upper-column' id='col2' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
7. Preview dan Save Template jika tiada error .
Via - Muncet
