THAY HÌNH NỀN CHO BLOGGER.COM

Default Sử dụng hình nền cho bloger

Kết quả thống kê từ công cụ tìm kiếm cho thấy nhiều bạn đọc quan tâm đến hình nền cho blog của mình. Ở bài viết này, chúng ta sẽ lưu ý một số điều về việc sử dụng hình nền.

Muốn có một hình nền theo phong cách “không đụng hàng” bạn phải tự thiết kế cho mình. Các chương trình xử lý đồ họa như Adobe Photoshop, Google Picasa,… giúp bạn thực hiện việc này. Vậy kích thước cho hình nền bao nhiêu?

Kích thước của hình nền thiết kế

Một blog đẹp hẳn phải có một hình nền đẹp, kết hợp màu sắc, kiểu chữ cộng với cách bố trí giao diện hợp lý.
Kích thước ngang của blog

Đăng nhập vào blogger.com, chọn layout ->Edit HTML (Trên Template) và kéo thanh trượt để tìm outer-wrapper.

HTML Code:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 883px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Đây là kích thước chiều ngang (width) của blog, đơn vị tính px (pixel). Chiều dọc không bị giới hạn. Tất cả theo mặc định. Tất nhiên không ai cấm bạn thay đổi. Phụ thuộc vào cách trình bày và giao diện theo template, bạn có thể thay đổi width cho template 2 cột bằng 800, hay 1024 cho 3 cột trở lên.

Để hình nền hiển thị, bạn phải chèn đoạn mã hướng dẫn bên dưới vào vị trí bên dưới.

HTML Code:

background-image:url(http://www.vidu.com/hinh.jpg);

Vị trí chèn
HTML Code:

/* Use this with templates/template-twocol.html */

body {
background:$bgcolor;
margin:0;
background:#ffffff;
background-image:url(http://www.vidu.com/hinh.jpg);
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Hãy thay http://www.vidu.com/hinh.jpg (liên kết đến hình nền của bạn), như: http://i198.photobucket.com/albums/aa172.jpg
Cách 1. Dùng các ảnh có kích thước màn hình chuẩn (ngang x dọc như: 800 x 600, 1024 x 768, …Hình nền sẽ bao phủ toàn bộ blog. Và đoạn mã sau dành cho cách này:
HTML Code:

background-image: url(http://www.vidu.com/hinh.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center center;

Giải thích:
background-repeat: no-repeat; (hình nền bao phủ hết trang nên chúng ta không cần để nó lặp lại) background-attachment:fixed; (cố định hình nền ở một vị trí nhất định)
background-position:center center;(canh giữa ngang và dọc cho trang
Cách 2. Hình nền có kích thước không theo màn hình chuẩn.

Trường hợp 1: Bạn sử dụng ảnh có width bằng kích thước ngang của màn hình chuẩn, ví dụ: 1024, 800,…
Và đoạn mã này phù hợp cho bạn:
HTML Code:

background-image: url(http://www.vidu.com/hinh.jpg);
background-repeat: repeat-y;
background-position:center center

Giải thích:
background-repeat: repeat-y; (hình nền lặp lại theo chiều dọc phủ đầy trang)
background-position:center center;(canh giữa ngang và dọc cho trang)
Trường hợp 2: Bạn sử dụng ảnh có width không bằng kích thước ngang của màn hình chuẩn. Và đoạn mã này phù hợp cho bạn:
HTML Code:

background-image: url(http://www.vidu.com/hinh.jpg);
background-position:center center;

Giải thích:
background-position:center center;(canh giữa ngang và dọc cho trang)
Hình ảnh sẽ lặp phủ đầy trang, theo mặc định.

Trường hợp 3. Tối ưu trường hợp 2, ảnh nền của bạn dùng có kích thước dài rộng bằng nhau. Hãy tưởng tượng những viên gạch lót nền có hoa văn giống nhau và gắn kết với nhau hoàn chỉnh bộ nền nhà. Bạn chỉ cần là một viên gạch để làm hình nền, viên gạch này sẽ lặp lại và bao phủ hết màn hình. Ví dụ: 20x20, 50 x 50, …Đoạn mã tương tự như trên.