Forteen Pro
™…†háißình ¶ƒïp…™
|
| Latest topics | » CƯỜI!CƯỜI MÃI!CƯỜI NỮA!!!!!!!!HEHE Fri Aug 27, 2010 10:41 pm by machtraitim» Photoshine 3.4 + crack -phần mềm lồng ghép hìnhFri Aug 27, 2010 10:08 pm by machtraitim» Chèn ảnh minh họa cho bài viếtFri Aug 27, 2010 8:09 pm by machtraitim» Làm sao để truy cập blog của bạn trên điện thoại di động?Fri Aug 27, 2010 4:40 pm by machtraitim» Đứng dậy nhé, bạn của tôi!Fri Aug 27, 2010 4:35 pm by honglen » Chèn flash game vào blogFri Aug 27, 2010 4:26 pm by machtraitim» Sao lưu và phục hồi templateFri Aug 27, 2010 4:15 pm by machtraitim» Mẫu Minima 3 cột dành cho Blogger mớiFri Aug 27, 2010 4:08 pm by machtraitim» Chuyện ma có thật 100 %Fri Aug 27, 2010 3:59 pm by honglen » Chèn playlist nhạc nền vào blogFri Aug 27, 2010 3:50 pm by vipmaster |
| | Fri Aug 27, 2010 3:46 pm | | [lHP] - vipmaster
 Teen Cá Tính
| Tổng số bài gửi : 21
 |
| |  Tiêu đề: Hình nền cho từng thành phần của blog | |
| |  | |  |  | Một cách làm hình nền khác: hình nền cho từng phần của blog (header, main, sidebar, footer).
Template theo mặc định bao gồm 4 thành phần
chính: header (đầu: chứa tên, miêu tả blog, main (chính: hiển thị bài
viết), sidebar (thành phần bên của trang, nằm bên trái hoặc phải hay cả
hai), footer (thành phần dưới cùng).
 Hình 2. Layout Hình 1. Mô hình hiển thị
Làm
sao để làm hình nền từng thành phần này? Sau khi đăng nhập blogger.com,
bạn vào Edit HTML, kéo thanh trượt sẽ tìm thấy các thành phần này.
A. Thành phần Header
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
B. Thành phần Main
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
C. Thành phần Sidebar
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
D. Thành phần Footer
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Như bạn đã biết cách chèn hình nền cho blog, đoạn mã liên kết đến hình:
background-image:url(http://www.vidu.com/hinh.jpg);
Trong đó http://www.vidu.com/hinh.jpg là liên kết đến hình nền. Như vậy muốn chèn vào header, bạn sẽ chèn như sau:
#header-wrapper {
width:660px;
background-image:url(http://www.vidu.com/hinh.jpg);
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Cách chèn tương tự cho các thành phần khác.
Kích thước hình nền cho từng thành phần
Tùy
theo width của mỗi thành phần. Các tối ưu nhất hình nền cho từng thành
phần có chiều ngang bằng với width của mỗi thành phần. Chiều dọc càng
nhỏ càng tốt.
Ví dụ thành phần main và sidebar sẽ kéo dài hoặc
thu hẹp chiều dọc theo nội dung bài viết hay số lượng widget được thêm
vào, điều này chúng ta không thể kiểm soát được, vì vậy sử dụng ảnh có
chiều ngang bằng width của mỗi thành phần, chiều dọc nhỏ để tự động lặp
lại theo độ dài hiển thị. Theo các con số như ví dụ trên, chúng ta sẽ
thiết kế hình nền với chiều ngang 410px cho main và 220px cho sidebar.
Một tấm ảnh vừa phải có kích thước 410 x 10 là tương đối hợp lý. Cần
thêm vào đoạn mã sau để hình nền lặp lại theo chiều dọc:
background-repeat: repeat-y;
Để hình nền này nằm vị trí cân đối, bạn có thể thêm vào:
background-position: center center;
Lưu
ý thêm, bạn có thể định nghĩa màu nền cho toàn bộ blog của mình sao cho
tương phản và làm nổi bậc các thành phần. Có hai cách để làm việc này.
Cách 1. Bạn chọn Font and Colors (Màu và chữ) trên Template, chọn màu cho background
Cách 2. Vào Edit HTML, bạn kéo thanh trược để tìm:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Trong đó background:$bgcolor; định màu nền thay đổi theo lựa chọn của bạn ở cách trên. Hãy lấy mã màu thập lục và chèn thẳng. Ví dụ, màu trắng như sau:
background:#ffffff;
Chúc bạn thành công! | |  | |  |
|
|
| | Hình nền cho từng thành phần của blog |    |
|
| Trang 1 trong tổng số 1 trang | | * Viết tiếng Việt có dấu, là tôn trọng người đọc.
* Chia sẻ bài sưu tầm có ghi rõ nguồn, là tôn trọng người viết.
* Thực hiện những điều trên, là tôn trọng chính mình.-Nếu chèn smilies có vấn đề thì bấm A/a trên phải khung viết bài
| | Permissions in this forum: | Bạn không có quyền trả lời bài viết
| | |
|
