Tutorial Buat Template Ringan (Denim)

Assalamualaikum ..


Masih tercari-cari template yang ringan? Hahaa! Dah bunyi ghope iklan. Dulu Tia selalu tercari-cari template yang ringan, ringkas, lawo. Dah jumpa yang cantik, berat pulak. Dah jumpa yang ringkas dan ringkas tak ceria pulak.


Kaji punya kaji Tia tau lah boleh buat template sendiri. Maksudnya kita boleh edit sendiri template tu ikut suka hati kita. Kali ni Tia bagi tutorial cara buat template sendiri yang agak ringan.


Sebolehnya, buat satu lagi blog. Tapi blog tu korang kasi private lah untuk korang edit-edit template. Kalau nak terus buat di blog utama tu, Tia nasihatkan supaya korang backup dulu ye template asal tu.


Dan lagi, kalau korang nak rasakan beza berat blog sebelum dan selepas guna denim template ni. Korang bolehlah timbang dulu berat blog sebelum dan timbang lagi selepas dah edit blog. Tengok berapa bezanya.


Mula tutorial.. Kita backup dulu template asal ye.

Step1 : Pergi Design > Edit HTML > Backup/Restore Template > Download Full Template

Sekarang kita akan tukar dan pakai template Denim untuk mula edit mengedit blog ye cucu. Hahaaaa..

Step2 : Pergi Design > Edit HTML > Scroll bawah sikit cari "Old Templates" > Klik "Select Layout Template" dekat Layout Templates (Launched 2006)

Ada banyak jenis template kan situ. Korang pilih dekat coloumn nombor dua dan tick pada Denim. Pergilah view blog. Suci bersih blog korang kan. Hahaaa!

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

Kita akan ubah bahagian header dulu.

Pergi Design > Template Designer > Advanced > Ubah satu-satu ikut senarai bawah ni ye..

  • Page Header Background Colour - Ubah jadi Transparent
  • Page Header Corners Colour - Ubah jadi Transparent
  • Border Colour - Ubah jadi Transparent

Lepas semua kat atas tu dah ubah, klik APPLY TO BLOG tanpa ragu-ragu. Lepas dah apply, korang boleh view blog dan tengok sendiri apa yang berubah pada bahagian header. Jangan masukkan dulu gambar header korang yea.


Sekarang kita akan ubah lebar content, main dan sidebar. Korang kena banyak main tukar-tukar angka sini. Ubah sampai ikut suka hati korang. Tapi dalam tutorial kali ni Tia akan tetapkan sendiri okey!

Pergi Design > Edit HTML

Kita akan mula main code dekat sini. Tips mudah untuk korang bila cari code nanti ialah dengan tekan dekat kekunci tu Ctrl+F atau pun tekan F3. Ingat yang ni selalu. Senang sikit nak cari.


Kita akan ubah lebar content dulu. Okey, tekan Ctrl+F dan cari code

#content-wrapper {

Lepas dah jumpa, ubah width jadi 900px. Sekarang kita nak ubah bahagian main pulak. Korang kena cari code

#main-wrapper {

Ubah width jadi 630px. Sudah main, sidebar pulak. Tapi sidebar Tia dalam tutorial ni Tia tak ubah sebab dah sesuai. Kalau korang nak tukar jugak, bolehlah cari code

#sidebar-wrapper {

Ubahlah width ikut suka korang. Cuma jangan terlebih. Tia nasihatkan, korang preview dulu sebelum save yee! Kalau dah sesuai, korang bolehlah SAVE. Ahaa! Dah panjang ni. Tunggu tutorial part seterusnya okey..


Korang boleh request dekat kotak komen bawah ni kalau nak ada apa-apa penambahan dalam template tu ye. Tia tak janji boleh buat tapi insyaAllah Tia akan cuba. Okey daaa~

*UPDATE*
NEXT TUTORIAL --> Tutorial Centerkan Header (Denim Template)


Sekian...
Previous
Next Post »

30 Comments

Click here for Comments
m
admin
July 19, 2011 at 6:01 PM ×

thanks for d info =)

Reply
avatar
Anonymous
admin
July 19, 2011 at 6:10 PM ×

gee sudah beralih arah dari Denim kepada minima style.. hehe.. :)

Reply
avatar
Damn Nations
admin
July 19, 2011 at 6:11 PM ×

Really nice... memang info ini dicari... berguna utk masa depan... thanks!

Reply
avatar
Unknown
admin
July 19, 2011 at 6:19 PM ×

adess susah ni tia..main koding2 pening kepala bro nie...tak pe, pelan2 belajar..mlm nnti nak belajar..sekarang tengah kerja ni, banyak ke perubahan dia..berapa kb boleh turun...tia woii

Reply
avatar
Unknown
admin
July 19, 2011 at 6:41 PM ×

same la..sy pon ade blog laen untuk try n error design2 baru..dah yakin baru buat dekat blog ksayangan kite tuh..btw rajin benor tia wat tutorial ek..hihi

Reply
avatar
me
admin
July 19, 2011 at 6:47 PM ×

nice tips ! nanti nk buat jugak. biaq ringan sket blog :D

Reply
avatar
Firdaus Life
admin
July 19, 2011 at 6:50 PM ×

blog tia dah ringan :) .. rasanya x perlu ubah dah kot

Reply
avatar
Anonymous
admin
July 19, 2011 at 7:09 PM ×

Weekend ni kte try :]

Reply
avatar
July 19, 2011 at 7:33 PM ×

tutor pasal hosting ngan domain ade x?...klu ada tips share la...=D

Reply
avatar
K
admin
July 19, 2011 at 7:49 PM ×

wah wah!

nice one, tapi template yang ni da ok kan?

p/s : alien pemalas sedunia XD

Reply
avatar
semutsengal
admin
July 19, 2011 at 7:49 PM ×

oh,

ni lah punca blog lading lambat ek, template berat..

Reply
avatar
Unknown
admin
July 19, 2011 at 8:11 PM ×

thnkx for the info tia...ayie pon skrng mula boleh bt background sendiri..

Reply
avatar
Areyoudys
admin
July 19, 2011 at 8:32 PM ×

as salam..
wah! revert back to 2006!
yup! memang ringan! pakcik pun rindu nak guna cara ni..thanks tia. ingatkan pakcik

=)

eh. jap.footer?

by : fadzli-rt

Reply
avatar
Encik JI
admin
July 19, 2011 at 9:07 PM ×

hebat :) xpndai nk dsign2 blog. guna yg dia bg, pastu edit skit2.

Reply
avatar
Ezad Skytech
admin
July 19, 2011 at 9:31 PM ×

wahh...terer la..belum mahir lagi nak edit template sendiri apatah lagi nak wat tutor...hee~

thankz Tia...(^^,)

Reply
avatar
Wanie
admin
July 19, 2011 at 9:50 PM ×

blog tia ni mesti ringan gle..

Reply
avatar
July 19, 2011 at 10:37 PM ×

menarek. tapi, saya malas betul nak edit2 neh. padahal kalo boleh nak ringankan lagi blog. -_-

Reply
avatar
adan
admin
July 19, 2011 at 10:56 PM ×

ndak pandai buat.. otak ku lambat loading.. pakai rem 1gb jak otak ku genk..

Reply
avatar
Nurul
admin
July 19, 2011 at 11:14 PM ×

thanks 4 d info..ade mase nt nk try..x menarik btol sy pnye 2..huhu

Reply
avatar
Unknown
admin
July 19, 2011 at 11:21 PM ×

denim template tu apa???
saya mak budak baru belajar..:)

Reply
avatar
Arpiiz
admin
July 19, 2011 at 11:51 PM ×

tengah cari masa untuk tukar template blog ni, nanti boleh lah try..hehe

Reply
avatar
FADZ
admin
July 20, 2011 at 1:14 AM ×

hehe..hebat2..tapi kalo nak design backgroung blog cam ner lak?=D

Reply
avatar
Tea Dno
admin
July 20, 2011 at 7:34 AM ×

huhu. tea dh pakai denim ni. lmbt jgk tea punya blog. huwaaa. cmne nih. kn dh tuka. T__________T

Reply
avatar
Rina Rahamat
admin
July 20, 2011 at 9:10 AM ×

smalam akk pon duk main-main ubah template ni..

Reply
avatar
nur adam
admin
July 20, 2011 at 10:11 AM ×

assalam..akk singgah baca n3..best tia..banyak lg nak beljar ni..tq

Reply
avatar
ct kektus
admin
July 20, 2011 at 1:11 PM ×

tenkiu2. boleh di praktikkan ni tia. :p

Reply
avatar
deeya
admin
July 20, 2011 at 4:19 PM ×

sye sakit malas . tia buat kan ! hahakz !

Reply
avatar
July 20, 2011 at 10:05 PM ×

waahhh thnkz tia buat tutorial ni....suke2

Reply
avatar
January 21, 2012 at 9:59 PM ×

sarannya oke juga sob...langsung ane praktekkin...

Reply
avatar