Tutorial:Design Layout Blog Sendiri (BODY)

Assalamualaikum.

Korang nampak tak blog CZ? Tue CZ design sendiri taw...*bangga sat* Kalau korang-korang semua nak tau macam mana CZ buat..teruskan baca entry nie, OK?

Sebelum tu CZ nak ingatkan yang tutorial nie sangat memeningkan dan memerlukan kesabaran yang tinggi, bagi sesiapa yang tak mempunyai kesabaran yang tinggi, boleh la angkat kaki..hehe..

So, lets begin!!!

1)

2) Kemudian download full template yang sedia ada, nie sebagai langkah berjaga-jaga, takut-takut tak jadi kan?

3) Kat bawah tu, ada Layout Template(launched 2006) kan? So kamu pilih template MINIMA ok.

4) Ok kita start part yang sangat memeningkan, tekan CTRL+F untuk memudahkan pencarian korang cari kod kat bawah nie:

#outer-wrapper {

     Ok, dekat bawah kod tue korang akan nampak benda yang macam nie

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:0px;
text-align:left;
font: $bodyfont;
}

Dah jumpa kan? Dekat situ lebar blog kita 660px kan. tapi boleh ja kalau nak lebar ikut suka kita. kalau CZ,  CZ guna 1000px.


5) Kita beralih arah pulak ke Photoshop untuk design body blog kita tue. ala yang tempat post kita bertempek   tuee..Dah buka photoshop masing-masing? Ok, kalau dah tekan FILE>NEW. Korang tentukan la berapa lebar blog korang.

   

Yang height tue pulak letak berapa pun tak kisah sebab nanti kita akan repeatkan sampai la ke bahagian bawah blog. Kat bawah ni contoh body yang CZ buat. Body ni akan jadi background untuk post and sidebar blog kita.

       

Kalau dah siap boleh la upload kan kat imgur atau photobucket, untuk dapatkan URL IMAGE.

6)  Ok kita balik kepada code yang korang cari tadi. Highlightkan semua dan pastekan code yang kat bawah nie 

pulak:

#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;
}

*masukkan IMAGE URL di tulisan kaler merah tue.


Kemudian, korang scroll ke bawah dan akan jumpa code yang macam nie:

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

Dah jumpa kan? Ok gantikan code tadi dengan code yang di bawah nie:

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

Kalau dah, korang scroll lagi ke bawah..*nie last sudah kita main scroll2 ke bawah..hehe

Korang akan jumpa code nie pulak.

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

Wahh..macam tau2 ja kan korang..kita akan gantikan code yang di atas nie dengan yang kat bawah nie:

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

7) Dah selesai copy paste semua benda tu, korang boleh la preview dan blog korang akan jadi macam nie.

And one more thing, mesti segala tulisan akan jadi kabur-kabur atau tak jelas..so korang adjust la kat Dashboard>Design>Template Designer.


Fuhhhhh....lega habis jugak untuk part body..penat la CZ menaip. Nanti CZ update lagi macam mana pulak nak buat bahagian header and footer. Selamat mencuba!




p/s: untuk copy just highlight and tekan ctrl+c serentak.

credit: BELOGCAPAYAM