TUTORIAL RAPATKAN HEADER DAN FOOTER KE MAIN BODY (PICTURE WINDOWS)

Hari ni, saya nak ajar tutorial rapat header ke main body dan rapatkan footer ke main body.. Rapatkan cemana..? Haa, macam blog diari saya ni..

Saya menggunakan template Picture Windows.. Saya tak pasti sama ada tutorial ini sesuai untuk template lain atau tak.. Dan jika anda menggunakan template lain, mungkin boleh research tutorial di google..

Sebenarnya, saya dah lama cari tutorial ni di google untuk template Picture Windows.. Bertahun juga cari dan edit sana sini, namun tak menjadi dan asyik gagal.. Lepas sekian lama, saya cuba godek sana godek sini dan taraaaaa menjadi pula.. Alhamdulillah..

So, let's get started..

First of all, cara rapatkan header ke main body.. Header di gambar di atas itu adalah rekaan saya sendiri.. Jadi, bolehlah korang design guna photoshop atau photoscape.. Lepas tu, korang pergi ke bahagian template ---> Edit HTML ---> CTRL + F.. Lepas tu, korang cari kod ini,

.Header img, .Header #header-inner {

Dan paste kan kod di bawah ni, di bawah kod .Header img, .Header #header-inner { tu tadi

width : 1000px;

height : 700px;

margin:0 auto -6px;

Width : Kelebaran header yang korang nak.. Macam blog saya ni, memang menggunakan 1000px iaitu mengikut kelebarannya blog..


Height : Ketinggian header..


Margin : Ada tulis -6px kan..? Korang boleh adjust nombor tu.. Jangan buang simbol negative (-)..


Then, cara rapatkan footer ke main body pula.. Caranya lebi kurang sama dengan cara header tadi.. Cuma, sedikit kodnya saja yang diubah.. So, korang cari kod ini,

.footer-inner {

Di bawah kod .footer-inner { tu, ada kod ini kan..?

padding: 10px $(main.padding.sides) 20px;

}

Korang padam je kod tu, okay..? Lepas padam kod tu, korang copy kod bawah ni dan paste kan di bawah kod .footer-inner { tu tadi..

background-image:url();background-position: top center; background-repeat:no-repeat;

width:1000px;

margin : -40px;

padding-top : -40px;

}

Width : Korang kena pastikan ianya sama dengan width header..


Margin dan padding-top : Korang adjustlah nombornya sampai footer korang rapat ke main body.. Jangan buang simbol negative (-).. Dan adjust nombor tu, dengan tukarkan nombor yang lebih besar..


Okay, tu je.. Harap membantu..

---

Terima Kasih Kerana Sudi Membaca Entri Saya

---