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 comments

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

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

Customized Social Media Icons from Acurax Digital Marketing Agency
Visit Us On FacebookVisit Us On InstagramVisit Us On PinterestVisit Us On TwitterVisit Us On Youtube