HOME AND My FRIENDSTER

Tutorial lain..

Three Column Minima

atas permintaan cik Shima...rasanya yang nie paling sesuai bab padlah try adjust dia nyer sidebar tu mcm2 ble jadik...klu tak jadi gak mintak maaf yerk...

1.log in blog

2.Layout

3.edit Html.

pastikan sebelum memulakan edit mengedit tu korang save semua gadget yang ada melalui note pad...sekali ngan coding Layout tu korang save yer..mana la tau incase tak jadi ker..tak ke susah2 nak buat satu2 balik...

ok ler..sambung balik...

1. carik coding

/* Header
-----------------------------------------------

*nak senang tekan Ctrl F

2.tukarkan  "header-wrapper" dari 660 to 940;

#header-wrapper {
width:660px; <-------tukar jadi 940
margin:0 auto 10px;
>border:1px solid $bordercolor;
}

contoh:

#header-wrapper {
width:940px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

3.sama gak ngan bahagian #description { tukarkan seperti dibawah

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:660px;<-------tukar jadi 940
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

contoh:

#description {
margin:0 5px 5px;
padding:0 20px 20px;
border:1px solid #eee;
border-width:0 1px 1px;
max-width:940px;
font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.2em;
color:#999;
}

4.kemudian cari coding berikut(guna Ctrl F)senang sket

/* Outer-Wrapper
---------------------------------------------*/

5.sama gak mcm kat atas..tukar width dari 660 to 940

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

#main-wrapper {
width: 410px; <-------tukar jadi 500
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 */
}

6.copy coding kat bawah nie..pastu pastekan seperti contoh dibawah...

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


Contoh:

#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

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


#main-wrapper {
width: 500px;
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 */
}

#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 */
}

7.carik lak coding

 /* Footer
---------------------------------------------*/

pastu tukar width "footer" dari 660 to 940

#footer {
width:660px; <-------tukar mnjadi 940
clear:both;
margin:0 auto; 10px
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

8.kemudian carik coding 


<div id='content-wrapper'>

dan 

<div id='main-wrapper'>

9.kemudian copy dan pastekan coding di bawah diatas coding <div id='main-wrapper'>

<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</div>


contoh:

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
<b:widget id='Gadget1' locked='false' title='Geo IP Tool' type='Gadget'/>
</b:section>
</div>


<div id='main-wrapper'>

10.kemudian save tamplate.

11.click layout..kemudia cuba periksa sama ada ada left sidebar...

selesai

selamat mencuba!



post signature

2 comments:

fadhlah said...

klu tak jadik comment kat Cbox yerk...

Bie'z said...

tak jadiiiii huhu