Hướng dẫn tạo Header và Footer cho Mash bằng CSS

Nếu làm giao diện cho Yahoo!Mash mà không làm Header và
Footer thì xem ra thua kém các bạn bè mất rồi! Có bạn tìm mãi hỏi mãi
cách làm banner, header đễ.... cạnh tranh.. nhưng đâu biết cách làm
thật đơn giản...

Cách thực hiện thủ thuật.


Bước 1: Chuẩn bị 2 tấm ảnh header và footer. Sau đó upload ảnh lên Flickr.com hay imagecave.com tùy bạn. Upload xong, lấy link đến ảnh đã upload. Trong ví dụ này, mình có 2 link như sau:


Header: http://www.helloict.com/mash/styles/noel/09/header.jpg

Footer: http://www.helloict.com/mash/styles/noel/09/footer.jpg

Bước 2: Tạo Header

- Đăng nhập vào công cụ tạo CSS tự động cho Mash
- Nhấp chọn tùy chọn Toàn trang >> Copy đường dẫn tới file hình header.jpg và past vào mục Hình nền >> Chọn tùy chọn Top center trong phần Vị trí ảnh nền.



- Nhấp thẻ Kích cỡ, nhập giá trị 500px 0px 0px 0px vào mục Biên đệm (padding).
500px 0px 0px 0px là giá trị biên đệm. Tương ứng với giá trị này có ý
nghĩ sau: giá trị biên đệm phía trên: 500px, biên đệm phải: 0px, biên
đệm dưới: 0px, biên đệm trái: 0px. Thay đổi giá trị bên đệm trên
(500px) để để toàn bộ nội dung của Mash trồi lên hay thụt xuống!



- Nhấp nút Cập nhật CSS khi hoàn tất để thấy kết quả

Bước 3: Tạo footer

- Cũng trong phần công cụ tạo CSS tự động, bạn nhấn nút Xóa các tùy chọn để làm sạch các form đã nhập trước khi làm phần header.

- Tiếp tục, chọn tùy chọn Cột bên trái >> Copy và past đường dẫn của hình footer.jpg vào phần Hình nền trong thẻ Màu & Nền >> Chọn vị trí Bottom center trong mục Vị trí ảnh nền >> Nhấp nút Cập nhật CSS để thấy kết quả.



Sau 2 bước công cụ cho ta 2 phần CSS như sau:

Phần CSS này là của Header:

body {

.....................
....................
}

Phần CSS này là của footer:

#colAA {

.....................
....................
}

Copy bổ sung 2 phần CSS này vào mục Advanced CSS của Mash. Nhấp nút Preview để xem thử và nhấp nút Apply để save lại!

CSS mẫu:

/*-------- This CSS is powered by HelloICT.com --------*/

body {
padding: 600px 0px 0px 0px;
background-image:url("http://www.helloict.com/mash/styles/noel/09/header.jpg");
background-position: top center;
background-repeat: no-repeat;
}
#colAA {
background-image:url("http://www.helloict.com/mash/styles/noel/09/footer.jpg");
background-position: bottom center;
background-repeat: no-repeat;
}

Kết quả xem thử:

Chúc các bạn thành công!

{emailalert}