Thursday, December 27, 2012

Tutorial : Membuat Layout Sendiri Untuk Blog Anda ( Part 1 )

Assalamualaikum dan Salam 1 Malaysia

Atas permintaan beberapa blogger , maka saya berbesar hati nak mengajar mencipta layout sendiri untuk blog korang. Suka tak ? Walaupun saya bukannya pandai dalam bab-bab mencipta ini. Tetapi untuk readers saya , saya sanggup masuk dalam lumpuh... Bukan lumpuh , tapi sanggup mengajar.. = ) Siapa tak nak belajar boleh nyah dari sini .. ( gelak jahat versi kucing tomeyCredit

Sebenarnya senang je nak buat layout sendiri. Pertama sekali kita kena tahu yang layout blog ni terbahagi kepada 4 bahagian iaitu bahagian header, body, footer dan sidebar. Untuk buat layout sendiri, aku pakai program Photoshop dan Imgur untuk image hosting. Kalau dah ada dua benda penting ni, baru lah korang boleh teruskan dengan step-step kat bawah. Kalau belum ada, sila adakan dulu. Ok, sekarang bersedialah untuk pening kucing..

Step pertama : Back Up template korang dahulu sebelum.. 

Template > Edit HTML > Proceed > Tick Expand Widgets Template > Copy semua codes > Paste di mana-mana (Notepad/MOW/New Post) > Save


Step ketiga : Dashboard > Template > Expand Widget Template > Search code dibawah ini... 
#content-wrapper {
korang akan jumpa dekat bawah dia cam gini kan ?? 

#content-wrapper {
  width: 760px;
  margin: 0 auto;
  padding: 0 0 15px;
  text-align: $startSide;
  background-color: $mainBgColor;
  border: 1px solid $borderColor;
  border-top: 0;
}

Ok, dekat situ kite boleh tengok yang width (lebar) template denim adalah 760px. Kalau korang nak tambah lebar blog, editkan pada bahagian width tu. Saya selalu menggunakan 1000px untuk mengedit blog..

Step keempat : Sekarang kita nak designkan bahagian body. Dekat photoshop , tekan file > New dan masukkan width mengikut lebar blog korang masing-masing.


Height (tinggi) tu letak lah berapa pun yang korang nak.70px 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 blog korang. Contohnya saya buat macam ini : 


Step kelima : Sekarang korang uploadkan gambar itu imgur..Selepas itu , korang klik kanan pada gambar yang korang upload di imgur.Dan tab itu ada url..Masukkan url yang korang dapat dekat tulisan yang bewarna merah.

#content-wrapper {
  width: 1000px;
  margin: 0 auto;
  background: url( URL BACKGROUND ) repeat-y ;
  padding: 0 0 15px;
  text-align: $startSide;
  background-color: $mainBgColor;
  border: 1px solid $borderColor;
  border-top: 0;
}

Kemudian, tekan preview. Sekarang korang akan dapati ruangan entry dan sidebar korang macam dah sewel sikit dan macam apa entah..buruklah jadinya kan ?. Jadi sekarang kita akan betulkan 2 bahagian tu. Dekat bawah code yang korang paste tadi korang boleh lihat ada code ni:
#main-wrapper {
  margin-$startSide: 14px;
  width: 464px;
  float: $startSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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 */
}

 Highligtkan semua code-code diatas ini dan pastekan code dibawah ini :
#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 */}
Bawah lagi dan korang akan jumpa code ini :-
#sidebar-wrapper {
  margin-$endSide: 14px;
  width: 240px;
  float: $endSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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 */
}
Macam dekat atas juga , korang highlightkan code diatas ini dan gantikan dengan code dibawah :-

 #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 */}
Sebenarnya korang telah mengubahkan posisi post dan sidebar ini.. = ) Ok tak ?

Lepas itu preview. Ok tak?  So , dia akan menjadi seperti ginilah.. 


Korang kena pandai main-main dengan code.. Kalo tak nanti korang boleh fening tahap gaban..

Nantikan part 2 dan seterusnya ok.. = ) 

6 Pengomen Terhebat !!:

Mohd Amirul said...

info berguna...
pernah pakai software artisterr??
kalau pernah...buat lah tuto dye ;)

*anyway nak try peningkan kepale ngan kod2 tuh jap :D

shadhira said...

timekasih buat tutor nie... cepat sambung part dua.. hehe. tak sabar..
pastu nk request boleh tak.. nk buat kotak komen yg smart bila org tinggalkn komen.. erm.. :)

Hanis said...

WAHHH best nya ;D credit sapa ya? :)

✖BossKucing✖ said...

waaa~ peningnya..

Nur Irdina said...

boleh tanye tak ? untuk tuto nie, gune photoshop CS ape ye ? ke adobe / portable ??

nur anaa niesaa' said...

thanks sebab adakan tutorial macam ni. saya buat blog guna tuto ni tau. tq.

 

Copyright © 2012 Reserved to Fujiwara Asuka Design with love by Fatimah Azzarah