First step: Apa-apa hal pun back up dulu current layout korang.

Takut nanti tak berkenan dengan layout baru, ada

yang frust menonggeng pulak. So, pergi dekat Layout > Edit HTML > Download Full Template > Save File. Jangan
lupa kat mana korang save sudahlah T______T
Second step: Pick new template > pilih template Minima > save. Kenapa template Minima? Sebab template ni
paling basic dan senang nak diedit2. Lepas tu Kita kena cari dulu berapa lebar layout yang kita nak kena buat.
Tekan Ctrl+f untuk memudahkan kerja-kerja pencarian. Dalam kotak find dekat bawah tu, paste kode ni:
#outer-wrapper {
Kau orang akan lihat something macam ni:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
}
Ok, dekat situ kite boleh tengok yang width (lebar) template minima adalah 660px. Kalau korang nak tambah lebar
belog, editkan pada bahagian width tu. Untuk tutorial ni, aku edit lebar belog tu jadi 1000px.
Third step: Kita pindah ke sesi photoshop untuk design bahagian body. Body ke apa ntah, tapi aku namakan je
body. Haha. Dekat photoshop, tekan File > New dan masukkan width mengikut lebar belog masing-masing macam
ni:

Height (tinggi) tu letak lah berapa pun yang korang nak. Tapi sebenarnya tak perlu pun besar-besar. 50px pun dah
cukup sebab image tu kita akan buat kasi repeat sampai ke bahagian paling bawah belog tu nanti. Dekat
photoshop, korang design lah macam mana korang nak untuk bahagian body belog korang. Contohnya aku buat
macam ni:

Click untuk gambar lebih besar.
Gambar yang kau orang design tu akan jadi backgroud untuk entry dan sidebar. Contoh yang aku buat ni adalah
sangat basic. Kau orang boleh buat yang jauh lebih-lebih-lebih bombastic.
Step Ke-empat: Sekarang uploadkan gambar tu dekat photoshop. Selepas Upload, korang akan dapat direct link ke
gambar tu:

Step Ke-lima: Dekat code yang aku suruh korang cari tadi, highlight semuanya dan paste kan code kat bawah.
Masukkan direct link gambar tu dekat tulisan berwarna merah macam dekat bawah ni:
#outer-wrapper {
width: 1000px;
margin:0 auto;
background: url(Masukkan DIRECT LINK gambar korang di sini) repeat-y;
padding:0px;
text-align:left;
font: $bodyfont;
}
Kemudian, tekan preview. Sekarang korang akan dapati ruangan entry dan sidebar korang macam dah sewel sikit.
Jadi sekarang kita akan betulkan 2 bahagian tu. Dekat bawah code yang korang paste tadi korang boleh lihat ada
code ni:
#main-wrapper {
width: 600px;
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 */
}
Pada code tu, highlight kan semuanya dan paste-kan code ni:
#main-wrapper {
width: 600px;
margin-top: 0px;
margin-left:50px;
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 */
}
Scroll bawah sikit dan korang akan jumpa code:
#sidebar-wrapper {
width: 290px;
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 */
}
sila highlight dan gantikan dengan code ini:
#sidebar-wrapper {
width: 290px;
float: right;
margin-top: 0px;
margin-right: 25px;
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 */
}
Apa sebenarnya yang korang dah buat dengan mengcopy-paste semua mende alah ni? Sebenarnya korang telah
mengubah posisi untuk main-wrapper iaitu bahagian entry korang dan juga sidebar dengan menggunakan code
margin-top dan margin-right/left.
Lepas dah copy-paste semua yang aku suruh tu, korang preview dulu dan blog korang akan jadi lebih kurang
macam ni:

Ok, korang boleh tengok yang tulisan korang tak jelas lah bukan? Sila main-main sendiri dengan warna dan font
(kalau nak tukar) di Layout > Fonts and Colors. Bontot aku pun dah rasa macam takde bontot sekarang. Jadi kita
berhenti dulu.