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...

• Tweet
• Share
• Share
• Share
• Share

PENAFIAN

Segala artikel yang dihasilkan oleh pemilik blog ini hanya sekadar pendapat peribadi yang mahu dikongsi bersama para pembaca blog ini serta untuk koleksi rujukan buat pemilik blog untuk kegunaan pada masa hadapan. Sebarang pertanyaan ataupun cadangan, sila emelkan ke inikisahtia@gmail.com

Related Post