How to Make 2 or 3 columns in the Column Header Bottom

To appear more beautiful and interesting we should make two or three examples I present kolom.Sebagi gadget layout drawing two and three columns under the header.

1.Masuk Blogger with your ID

2.Click Layout

3.Click Edit HTML submenu

4.Centang small box in the upper right corner next to Expand Widget Templates, wait for the loading process is complete.

5.Cari code like this]]> </ b: skin>

6. Copy Paste the code below just above the code]]> </ b: skin>

# box-container {main-

clear: both;

}

. box-column {

padding: 0px 10px 10px 10px;

border: 1px dotted $ bordercolor;

}

CSS code, please edit border.padding and type of line.

Now we put the HTML code

7.Cari code like this:

<div id='main-wrapper'>

8.A.Letakkan the following code in the code earlier. (For the two columns under the header)

<div id='box-main-container'>

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

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

</ div>

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

<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>

</ div>

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

</ div>

8.B.Letakkan the following code in the code earlier. (For the three columns under the header)

<div id='box-main-container'>

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

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

</ div>

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

<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>

</ div>

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

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

</ div>

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

</ div>

Template 9.Simpan

To see results click on Page Elements

Good luck ........