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
  1. eemmm… masa nak buat 3 column tu.. kita pun blurr22.. sib baik ktyfir tlg tunjuk ajar.. alhamdulilah menjadi

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

  3. CuteMiut78 >> bleh bleh sabo ye,,,

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

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

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

Comments are closed.