Menambah 4 column di Header

Teringin pasang 4 column baru dibawah header seperti ini:



Mula-mula cam biasa lah yerk

1.Login ke blog korang
2.Klik Layout
3.Klik Edit HTML
4.Masukkan kod CSS ini

/* Upper-column
----------------------------------------------- */

#upper-column-container {
clear:both;
background: #FFFFFF;
line-height: 1.4em;
margin:auto;

height: 300px;
border: 1px dotted #ccc;
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;
}

sebelum kod ]]></b:skin>

Nota
*upper-column-container --Korang boleh ubahsuai style seperti border, background dan sebagainya.

*Height - korang boleh letakkan height/ketinggian yang korang suka bersesuaian gambar/text yang korang ingin masukkan.Jangan masukkan teks atau gambar melebihi height korang kerana ianya akan menggangu isi kandungan korang yang lain jika teks yg dimasukkan melebihi saiz sebenar height.


*upper-column-container h2 - yang ni pulak untuk Tajuk Column.Korang boleh letakkan juga background, border dan lain2.

5.Seterusnya, masukkan pula kod

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

<div id='upper1' style='width: 25%; 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: 25%; float: left; margin:0; text-align: left;'>
<b:section class='upper-column' id='col2' preferred='yes' style='float:right;'>
</b:section>
</div>

<div id='upper3' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='upper-column' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>

<div id='upper4' style='width: 25%; float: right; margin:0; text-align: left;'>
<b:section class='upper-column' id='col4' preferred='yes' style='float:right;'>
</b:section>
</div>

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


diatas kod <div id='main wrapper'>

6.Kemudian Save.
7.Klik Page Element
8.Ianya akan kelihatan seperti ini



9.Korang boleh letakkan apa2 widget yang korang suker
kat situ.
10.Selesai.K..selamat mencuba

Luangkanlah sedikit masa korang untuk memberi komen di blog ini kerana setiap komen yang dibuat oleh korang amat bermakna dan secara tidak langsung ianya memberi suntikan semangat untuk saya terus menulis di blog ini...