DASHBOARD HOME TUTORIAL TEMPAHAN MY DESIGN

Freebies: Template Minima White Part 1


Atas permintaan  fieda dan izan, dalam entry kali ini saya sertakan link untuk kau orang copypaste template Minima White yang saya pakai setiap kali mendesign blog. Semua tutorial saya boleh diaplikasikan pada template tersebut ^___^

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 Sini. Selepas Upload, korang akan dapat direct link untuk link  gambar itu:
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.

Kredit By: Belog Cap Ayam

TERIMA KASIH SUDI BACA DAN KOMEN

5 comments:

Unknown said...

tq cik rose..tapi mmg izan gagal nak buat..sebab..xdok photoshop...harap kak fieda dapat buat dengan jayanya...huhu sedey...

insan_marhaen said...

izan c'jai pun sama..tingin nak wat tp xde photoshop....terima kasih cik ros bg link ni...

fieda said...

adoii..pening pale nok buleh ke paham..makan masa sampai setahun ni baru blh paham..hihi..huhu...hari2 kena dtg sini la ambik ilmu ni..akan di try test..tq cik rose sbb buat entry ni khas utk kami...

Madam iEeDaZ said...

Ayooo~~ mama isha pun pening ni.. Mmg taktahula ape jadi kalu duk main2 guna code tu! Hahah
Nk study pun taktau bile leh khatam nih.. Che rose tolongg :p

Anonymous said...

kak laman web yang akak bagi tu ade 2 sidebar camne nak bagi die jadi satu sidebar je? akak jawab kat shoutbox saye leh time kasih :)