Posted in Tutorial

3 column

Request dari Zie & untuk my collection..org dah banak ni kan selalu pelupa…

1. Masuk ruangan Layout

2. Klik pada Edit HTML

3. Cari kod seperti di bawah ini.

#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

4. Tambah kod ini di bawah kod tadi

#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

5. Kemudian cari plak kod ini

<div id=’main-wrapper’>

6. Tambahkan kan kod ini kat atas kod tadi

<div id=’left-sidebar-wrapper’> <b:section class=’sidebar’ id=’left-sidebar’ preferred=’yes’/> </div>

7. Untuk seimbangkan column, korang perlu tambahkan kelebaran (width) pada wrapper korang. Contohnya:

#outer-wrapper {
width: 660px; <---- syor tukar 880px
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

8. Cari kod seperti di bawah dan tambahkan kod yang di berwarna biru pada kod korang untuk elak dari melekat ke main-wrapper.

#main-wrapper {
width: 410px;
float: $startSide;
margin-left: 20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Kemudian Save Template.
Try preview. Menjadi tak klu tak jadi try tengok kat Along Arman coz me pun yg stick tu dia yang ajar…

SEKIAN…GOOD LUCK YA..

pic10-1

6 thoughts on “3 column

  1. eemmm… masa nak buat 3 column tu.. kita pun blurr22.. sib baik ktyfir tlg tunjuk ajar.. alhamdulilah menjadi

  2. kak!!!sy bg link tutorial wat 3 kolum ni kat member sy ye…dia tny…halal ye kak…muaahhh

Comments are closed.