10 December 2010

Tutorial 6# Mengasingkan antara sidebar dengan Ppost


Tuto ini request daripada Adik Mai..

Okeyh bab ini kite kne serius sbb nyh agk ssh..
Jdy sle tumpukan p'hatyan.. Jgan cuit kwan sbelah anda yer.. =)

Firstly cary kod nyh.. Tkan CTRl +f


#main-wrapper {
width: 410px;
float: $startSide;
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 */
}


Masukkan kod nyh..

background-color:#(warna yang korang nak)


Dan ia akan menjadi seperti ini

#main-wrapper {
background-color: #(warne yang korang nak);
width: 410px;
float: $startSide;
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 cari kod ini,

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

masukkan kod ini

background-color:#(warna yang korang nak)
Dan ia jadi seperti ini

#sidebar-wrapper {
background-color: #ffffff;
width: 220px;
float: $endSide;
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 cari kod ini

h2 {

Dan ltak kod ini d'bwahnyer..

padding-left: 10px;
padding-right: 10px;

Kemudian cari kod ini

.post {

dan ltak ko ini d'bwahnyer

padding-left: 10px;
padding-right: 10px;

Kemudian lgy, cari kod ini

#sidebar-wrapper {

Dan ltak kod yang sme iaitu ini

padding-left: 10px;
padding-right: 10px;


Okeyh kte dh nk habis...

Cari kod ini

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

sile delete kod tersebut dan gantikan dengan kod ini


.sidebar .widget {
background:#ffffff;
border: 1px solid #000000;
margin:0 -5px 1.5em -5px;
padding:5px 7px 5px 7px;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}


Akhir sekali cari kod ini

#sidebar-wrapper {


Delete kod ini

background-color: #ffffff;



Fuhh... Selesay.. Sebarang pertanyaan boleh hubungi di komen d'bawah...
Sekian..

No comments:

Post a Comment

Awak comment saya sayang.. =)