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

---