Tuesday, April 14, 2009

3 column

Jot Down by Mummy Dasy at 8:13 PM
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 yang membebel:

CuTeMiUt78 said...

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

CuTeMiUt78 said...

nak tanya la.. camne letak gambo budak2 tu.. kat area bawah komen tu.. blh ajar tak..

Mummy Dasy said...

CuteMiut78 >> bleh bleh sabo ye,,,

mummy_ayu said...

Cikgu, anak murid nak tanye nie..macam mana nak buat header blog macam u punye tu?TQ

Mummy Dasy said...

Mummy_ayu >> header tu edit kat PS or nak senang try picnic

NizA said...

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

 

Ω Bebelan DaSy Ω Template by Ipietoon Blogger Template | Gift Idea