TUTORIAL: ABOUT MINIMA TEMPLATE BY CLASSIC TEMPLATE

INI ADALAH TUTORIAL FULL (kot) TENTANG LAYOUT MINIMA TEMPLATE  by Classic Template . KORANG BOLEH LAH CUBA KALAU NAK CUBA . SELAMAT MENCUBA yaa ! =)

----------------------------------------------------------------------------

Assalamualaikum uols :) okay lah, straight to the point, aku ingat nak buat tutorial how to decorate your minima template by classic template . tapi ia nya sesimple blog aku sekarang nih lah . see..simple jer bukan . and tak lupa jugak , big thanks to belog-cap-ayam.blogspot.com sebab aku just refer tutorial dia plus tutorial aku dan dengan sedikit kebijaksanaan aku membaca kod. kahkah. ops, bukan nak riak. hehe. and haritu ada orang tanya aku ada amik tempahan edit blog tak ? sory, aku tak ambik tempahan sebab aku takde lah kreatif bagai, aku buat simple jer pon. so thats why lah aku tak ambik, aku bukannya kreatif bagai .kekadang , aku cuma tolong decorate blog kawan aku jer  :) so, akulah buat tuto nih then korang boleh lah refer then buat ikut kreativiti korang okay ? :)

oke lah, mari kita start pembelajaran kita harini , ada tutorial yang aku rujuk blog cap ayam tapi aku buat dalam versi aku.sori , aku tak mau jadi kopiket, jadi kitkat lagi sedap bukan ? oke, stop bubbling around , jom start ! ;DD

Langkah 1: Sila baca bismillah sebelum start sebab ianya memerlukan kesabaran yang tinggi :p tidaklupa juga,sedia kan satu jaq ayer dan sedikit makanan. kehkeh.

Langkah 2:  Dashboard ---> Design ---->Edit HTML---->download full template .( ini adalah langkah berjaga-jaga supaya korang xmai serang aku macam zomba bila korang buat tak jadi . insy, kalau korang ikot step by step jadi aihh...jangan lupa nama file korang simpan tu, kang tak jadi, pastu korg lupa plak nama file yg korang simpan tadi memang TERBAIKKK ! bak kata boboiboy XD)

Langkah 3: scroll ke bawah sikit, then korang akan nampak seperti gambar dibawah ini, sila klik SELECT LAYOUT TEMPLATE

kemudian, dia akan muncul template banyak2 untuk kita pilih, korang amik yang jenis simple, minima.lepastu save template. rujuk gambar bawah.

lepas tu korang view blog korang. kejap, jangan menangis dulu, tak sempat decorate lagi tu, thats why lah  jadi buruk camtu. hehe. chillax okay, jom kita ke next step .

Langkah 4: Dashboard ----> design ---->edit HTML ----> tick Expand widget template.

Langkah 5: CHANGE BACKGROUND BLOG.

a). oke, untuk change background , korang cari code ini , Ctrl+F : body {

b) dah jumpa ? tengok kod dibawah dia macam ni kan ?

ha, korang deletekan kod yang dalam kotak merah tu,pastu korang gantikan dengan kod :

background: #(kod kaler);  ini kalau korang nak bagi background blog korang tu kaler sahaja. kod kaler boleh lah rujuk kat sini

background: url (url gmbar korang nak letak sbg background blog); ini kod untuk korang nak letak background gambar2 bagai .

so, ianya akan jadi camni, contoh aku letak background yg ada gambar.

lepas tu korang preview , ini contoh background yang aku letak . lepas dah jadi,sila save . dan klik sini.terima kasih ;p kemudian next step.

Langkah 6 :  CHANGE BACKGROUND FOR SIDEBAR AND ENTRY

a) korang tekan F3 atau Ctrl+f untuk cari kod ni : #main-wrapper {

b) lepastu korang akan jumpa kod mcm bawah ni(rujuk gambar), then,korang tambah kan jer kod ni:

background: #FFFFFF;

*kod warna tu boleh tukar :)

c) kemudian , untuk tukar warna sidebar pulak, korang nampak tak kod #sidebar-wrapper { tu, ha,then buat macam tadi jugak , tmbahkan jer kod ni dekat bawah kod #sidebar-wrapper { tu:

background: #FFFFFF;

d) okay, then, korang tengok gambar kat atas tu yang dalam kotak merah tu, itu adalah lebar bg outer wrapper,sidebar dgn bhg entri post korang, kalau korang nak bagi entri korang tu lebar sikit, korang ubah je la nilai tu ,macam lah jugak yang lain lain tu okay ? kemudian preview, then SAVE ! ini lah hasil blog aku setelah di besarkan ruang entri dan diletakkan background pd entri dan sidebar :) :

oke, sekarang, korang tengok tulisan entri tu mcm ketepi sangat laa, xcun kan? so korang juz kopi kod dibawah ini then pastekan dibawah kodkod  h2 {  , .post-body {  dan #sidebar-wrapper {

 padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;

Langkah 7: PISAHKAN WIDGET DAN BUAT BORDER KELILING WIDGET SIDEBAR DAN ENTRY.

a) oke, memula korang CTRL+F untuk cari kod ni : .sidebar .widget, .main .widget {

pastuh,korang akan nampak kod mcm bwh ni kan ?

b)okeh, korang deletekan kod yang dalam kotak merah tu, then gantikan dengan kod ni:

.sidebar .widget { 

background: #FFFFFF;

border: 3px solid #01DF74;

*kod kaler, ketebalan border korang boleh adjust , begitu juga dgn perktaan solid tu,perkataan tu korang boleh tukar dengan dashed/dotted okay :)

then, dia akan jadi camni kan ?

okey, then preview . ni contoh blog i jadi macam ni :

c) okeh, korang nampak dah ada border di sekeliling sidebar widget korang ? then, ada something wrong pulak dengan sidebar tu, okay, dont worry, korang cari kod #sidebar-wrapper { tu then korang deletekan jer kod  dalam kotak merah tu (rujuk gambar dibawah)

oke, lepas tu preview, then sidebar korang jadik macam ni kan (gambar dibawah),kalau jadi korang Save lah =) pastu klik sini pulak. hehe .

d) okeh, kali ni kita nak buat border untuk bahagian post entri pulak . Ctrl+f untuk cari kod  #main-wrapper {

dah jumpa ?korang tambahkan kod ni border: 3px solid #01DF74;  dekat bawah kod  #main-wrapper { tu tadi, kemudian preview,ada border tak dekat bahagian entri macam dlm gmbar bawah ni ,kalau jadi Save :)

kalau korang dah berjaya hingga ke tahap ini . tahniah (!) oke, kemudian terus ke Langkah seterusnya :)

Langkah 8 :  CARA MEBUAT LENGKUK PADA SIDEBAR DAN ENTRI .

 okeh,langkah ini kalau korang nak bagi dia lengkuk lah, kalau korang nak dia empat segi macam tuh jea, korang boleh lah skip langkah ini . sebelum itu, aku nak tanya, korang pakai browser haper ? kalau korang pakai mozilla firefox, korang better tengok tuto dekat sini  sebab kod untuk border bagi mozilla and google chrome dia lain sikit taw. then kalau korang guna mozilla,then pakai kod border yang utk google chrome, konfem sampai ke esok pon korang takkan nampak border korang tuh melengkung ke tak . kan ? thats why lah. dan bagi pengguna google chrome, korang boleh lah refer langkah ini .

a) memula,kita nak lengkuk kan bahagian sidebar . Ctrl+F untuk cari kod ini : .sidebar .widget {

b) dah jumpa kah ? kemudian korang tambah kan kod untuk border yang korang nak dekat bawah kod .sidebar .widget {  tadi tu. mana nak cari kod untuk border bolehlah KELIK SINI. ini contoh bila kod border tu ditambah , kemudian di preview. and kalau jadi. korang save okay.

dan bila di preview, blog aku dah jadi macam ni : (tgok bhg sidebar widget)

c) step seterusnya ialah nak buat lengkuk dekat bahagian post entri lah pulok. Ctrl+f untuk cari kod ni #main-wrapper { 

d) macam tadi jugak, korang paste kan kod border yang korang nak dekat bawah kod #main-wrapper { tu ok . then,preview.dah jadi save .

 ini contoh belog aku hasil dari step satu hingga ke step ni :

Langkah 9 : LETAK BORDER PADA SIDEBAR WIDGET TITTLE AND POST TITTLE.

a) oke lah , mula mula, kita nak letak letak border pada sidebar widget dulu. Ctrl+f untuk cari kod  h2 {

kemudian, korang akan jumpa kod mcm ini :

oke, kemudian, korang deletekan kod dalam kotak merah tu . dah delete,korang kopi dan paste kan jer kod ni dekat bwh h2{ tu okeh ? :)

font-family: segoe print ;

color: #0B6138;

font-size:14px;

text-align:center;

border-bottom: 3px dashed #01DF74;

text-shadow: 1px 1px 1px #A9F5D0;

padding: 5px 0px 5px;

*font-family korang boleh ubah , letakkan jer nama font yang korang suka okay ? atau nak mudah korang bukak word,pastu amik nama font kat situ jea okay :) , kod kaler untuk font dan size tu for sure korang boleh ubah jgk,  perkataan dashed tu boleh diubah kepada solid/dotted. and ofcoz kalau xmau text ada shadow, buangkan jer kod text-shadow tu okay? :)

lepastu preview, then kalau jadi, save jer okay ? so, blog aku dah jadi macam ni --->

apeee? korang xmaw border sidebar yang simple mcam tu jer ? hehe. dont worry, korang boleh lah refer tutorial ini untuk buat sidebar yang molek molek. tapi ingat , korang mesti deletekan jugak kod dlm kotak merah macam  gambar kat atas tu oke? then,korang just paste kan kod jenis border yang korang refer dekat tuto aku yg aku kasi link td tu dekat bawah h2{ tu jgak okay ?

b) oke, sekarang kita nak buat border dekat post tittle lah pulok . Ctrl+F utk cari kod ni :

.post h3 {

dah jumpa?kopi dan paste kan je kod ni dekat bawah kod .post h3 { tu oke?

font-family: segoe print ;

font-size:14px;

text-align:center;

background:#58FAAC;

-moz-border-radius: 25px 10px / 10px 25px;border-radius: 25px 10px / 10px 25px;

text-shadow: 1px 1px 1px #A9F5D0;

padding: 15px 10px 0px;

*as usual, font-family ,font size,kod kaler utk backgrnd boleh diubah. kalau korang nak letak background yg ada gmbr lawa, just gantikan kod  background:#58FAAC; tu dengan kod background: url(url gmba background korang);  sahaja okay. then tulisan kaler merah tu ada lah kod utk bentuk border, kalau xnak bentuk border mcm tu, korang bolehlah gantikan kod border tu dengan kod border kesukaan korang. kod tu boleh didapati dekat sini. and kalau xnak text ada shadow, buang jer okay ? :)

oke, kemudian preview, kalau jadi save jer okay . so blog aku jadi macam ni dah :

Langkah 10 : Change Colour For Font Tittle &Sebagainya.

okeh, sekarang, aku nak ajar korang cara mudah nak change colour untuk font  ni , korang ikut step ni okay .

a) korang CTRL+F untk cari kod ni  /* Variable definitions pastu korang akan nampak macam ni kan :

haa, lepastu,korang baca lah description dia tu, mcm dlm kotak merah dlm gmbar tu, kotak merah tu aku edit nak bg korang nampak okay. jangan dok cari kat kod korang pulak . contoh, korang nak change Post Tittle Color kan, ha, korang pegi je dekat kot mcm dlm gmbar yang ada 'Post Tittle Color" blabla tu kan, then, gantikan kod warna (dalam kotak itam mcm gmbar diatas) tuu. pastu preview, kalau jadi Save lah. korang ulang jer step tu untuk change color untuk link colour and suma suma lah yang korang nak change okay ? :)

Langkah 11 : okay, ini adalah untuk kita letak header pulak . macam biasa, korang mesti tawkan macamana nak letak header ni.  so, xpayah lah aku tunjuk. korang buat macam biasa jer okay . eh, sebelum tu, korang ubah kod ni dulu okay supaya header korang sama dengan width blog korang. Ctrl+F untuk cari kod ni :

#header-wrapper {

  width:660px;

okay, dah jumpa kens? korang ubah lah width dia ikut kelebaran/ width outer-wrapper blog korang tu, contoh kelebaran blog aku ialah 860, so aku ubah lah. then , bila diupload header tu dia jadi cmni  . eh, kalau korang xtaw mcm mana nak buat header boleh lah refer tuto aku kat sini (utk transparent mcm aku tu,using photoshop) dan kat sini (using photoscape) :

Langkah 12 : Cara nak buang border bahagian header and nak buang blog tittle tu.

a) Ctrl+F untuk cari kod ni  /* Header 

pastu korang akan jumpa mcm ni kan ? pastu deletekan kod  yang aku tunjukkan dalm kotak merah dlm gambar bawah ni okay ? :)

preview...kalau jadi save,. kemudian kita nak buang blog title tu plak. macamana ? ikut step ni :

 a) Ctrl+F untuk car kod ni #header h1 {

dah jumpa? korang akan nampak kod mcm ni kan ?

korang deletekan kod yang mcm dlm kotak merah dlm pix atas tu pastu gantikan dengan kod ini ;

font: 0 px;

pastu preview...seee? dah ilang kan? pastu save ! ini lah hasil blog aku :

simple jer bukan ? so, korang boleh lah gunakan kreativiti korang untuk melawakan blog korang. ini aku buat cikai cikai jer, haha. oh, lupa, ada satu lagi Langkah bhai. 

Langkah 12: cara membuang border pada image

a) Ctrl+F untuk cari kod ni .post img, table.tr-caption-container {

dah jumpa ? kod dia mcm ni kan 

.post img, table.tr-caption-container {

  padding:4px;

  border:1px solid $bordercolor;

* tukarkan nilai 1 tu kepada 0 okay ? :)

pastu preview, dan saveeee ! pastu sumbang derma kat aku sikit untuk beli coklat dgn klik kat sini .terimakasih :D

eh, aku rasa belog korang tu still xcantik sebab bahagian post footer tu simple jer kan? so, korang boleh lah pegi cari mana-mana blog tutorial yg ada tuto utk mencantikkan post-footer. nak mudah ? search kat encik google jer. hik3. okay lah, habis dah aku muntah kan ilmu ni kat korang . kalau xpaham ker apa ker tanya je lah. maaf kalau aku lambat reply sbb aku dah nak smbg belajar. ehh, aku mintak maaf kalau buat korang pening dgn tuto aku nih. aku just nak share jer . okay . bye ! have a nice day peeps :)