Label Cloud

Search This Blog

10 February 2010

online counter Membuat 2 Column Di Ruangan Atas

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





Tinggalkan Komen Anda Disini