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 ........

Anda sedang membaca artikel tentang How to Make 2 or 3 columns in the Column Header Bottom dan anda bisa menemukan artikel How to Make 2 or 3 columns in the Column Header Bottom ini dengan url http://wawasanfadhitya.blogspot.com/2012/02/cara-membuat-2-kolom-atau-3-kolom-di.html?m=0,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel How to Make 2 or 3 columns in the Column Header Bottom ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link How to Make 2 or 3 columns in the Column Header Bottom sebagai sumbernya.

Share on :

Bagikan

share

Oleh Fandi Adhitya | | 0 comments