Tìm kiếm
Latest topics
Thống kê lượt truy cập
Hinh ne cho tung phan trong Blog
Trang 1 trong tổng số 1 trang
Hinh ne cho tung phan trong Blog
Hình nền cho từng thành phần của blog
Sở hữu ngay tên miền CO.CC ngắn gọn, dễ nhớ, miễn phí, không bị chặn,... cho website, blog.
Đăng ký nhận bài viết mới qua email Bạn đã làm hình nền cho blog của mình chưa? Nếu chưa, hãy đọc bài viết này. Hôm nay tôi hướng dẫn 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).
[You must be registered and logged in to see this link.]
Hình 2. Layout
[You must be registered and logged in to see this link.]
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 đó [You must be registered and logged in to see this link.] 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!
Sở hữu ngay tên miền CO.CC ngắn gọn, dễ nhớ, miễn phí, không bị chặn,... cho website, blog.
Đăng ký nhận bài viết mới qua email Bạn đã làm hình nền cho blog của mình chưa? Nếu chưa, hãy đọc bài viết này. Hôm nay tôi hướng dẫn 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).
[You must be registered and logged in to see this link.]
Hình 2. Layout
[You must be registered and logged in to see this link.]
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 đó [You must be registered and logged in to see this link.] 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!
Similar topics
» Phần mền vẽ hình vật lý trong word
» Tạo hiệu ứng hoạt hình trong PowerPoint
» TẠO HIỆU ỨNG HOẠT HÌNH TRONG POWERPOINT 2003
» Phần mềm đổi số thành chữ trong Excel
» Những phần mềm tảu nhạc, phim, hình ảnh hàng loạt
» Tạo hiệu ứng hoạt hình trong PowerPoint
» TẠO HIỆU ỨNG HOẠT HÌNH TRONG POWERPOINT 2003
» Phần mềm đổi số thành chữ trong Excel
» Những phần mềm tảu nhạc, phim, hình ảnh hàng loạt
Trang 1 trong tổng số 1 trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết
|
|
Mon Aug 06, 2012 2:31 am by admin
» Mẫu phiếu trường học thân thiện học sinh tích cực
Tue May 22, 2012 3:31 am by admin
» PHIẾU GIÁO VIÊN TỰ ĐÁNH GIÁ - CẤP THCS
Tue May 22, 2012 3:06 am by admin
» Hướng dẫn đánh giá, xếp loại GV trung học theo Thông tư số 30/2009/TT-BGDĐT
Mon May 21, 2012 12:34 am by admin
» Quy định Chuẩn nghề nghiệp giáo viên trung học cơ sở, giáo viên trung học phổ thông
Sun May 20, 2012 9:20 pm by admin