Monday, August 20, 2007

Hình nền cho từng thành phần của blog

Đăng ký dịch vụ lưu trữ đám mây: Dropbox, Mediafire, OneDrive. Sau khi đăng ký xong, cài đặt phần mềm cho Windows hoặc ứng dụng điện thoại - máy tính bảng để đồng bộ dữ liệu.

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).

Hiển thị
Hình 2. Layout


Các thành phần trên 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!

Tham gia Cộng đồng sử dụng Blogger Việt Nam trên Facebook, giải đáp thắc mắc, mẹo vặt, chia sẻ kinh nghiệm sử dụng Blogger (BlogSpot)...

24 comments:

  1. A Nhân chỉ em cách làm thanh ngang ở header như th61 này với:
    http://upload35.com/upload/I12/1213257721.png

    Thank !!!

    ReplyDelete
  2. doc. 1 hoi` tui cug~ hok hiu? kaj' j` het' lun:D

    ReplyDelete
  3. giúp mình với! mình làm hình nền cho toàn màn hình theo đúng chỉ dẫn nhưng khi làm phần main thì làm không được.Hình nền main ko hiện ra. Có khi nào nó nằm dưới hình nền của toàn blog không. cách khắc phục như thế nào? hay là khi làm hình nền cho toàn blog thì không được làm hình nền từng phần? nhưng em thấy có nhiều blog họ vẫn làm được.

    ReplyDelete
  4. ko! phải nói là khi em xóa hình nền toàn bộ thì hình nền main vẫn không hiện lên, xem em có làm sai gì không:
    #main-wrapper {
    width: 400px;
    background-image: url(http://s200.photobucket.com/albums/aa2/huynhphuoctoan/?action=view&current=tamam.jpg);
    background-repeat; no-repeat;
    background-position: center center;
    margin-left: 20px;
    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 */
    }

    ReplyDelete
  5. choy ui
    doc xog ma k bit j het tron het troi
    ban chi 1 cach chi tiet hon di

    ReplyDelete
  6. tớ hok hiểu lắm vì tớ mới làm blog thôi mà. Có thể chỉ cách nào đơn giản hơn với người mới như tớ hok. Và tớ muốn lấy hình trực tiếp từ máy tính của tớ lên làm hình nền thì làm sao?

    ReplyDelete
  7. Bạn thử vào xem blog của Pogi có được không nhé.
    www.hoangluubaby.blogspot.com

    ReplyDelete
  8. anh ơi
    cho em hỏi phần templeta của blog em nó bị ẩn phía sau phần main (đăng nội dung bài viết)
    có cách nào để giúp em ko, em ko biết làm cách nào để có thể nó hiện lên trước hoặc bên hông của phần main đc.
    anh có thể cho em thông số cơ bản của những phần trong blog đc ko, giờ em căn chỉnh nhiều quá nên nó hơi rối tý.
    cảm ơn anh

    ReplyDelete
  9. Anhvo hướng dẩn cách chỉnh Font trong header được không? Em gõ chữ in hoa nó ra chữ thường là sao? giúp em nhé. Thanks

    ReplyDelete
  10. @pogi, tìm trong phần CSS thẻ h1 và thêm vào: text-transform: uppercase;

    ReplyDelete
  11. Cảm ơn nhiều nhé, Pogi đã làm được rồi.
    Chúc thành công.

    ReplyDelete
  12. cho em hoi muon kai hinh nen thi vao dau a?

    ReplyDelete
  13. co ai ko tra loi em voi

    ReplyDelete
  14. @trang, hướng dẫn trên dùng cho Blogger (www.blogger.com) em ạ.

    ReplyDelete
  15. chào bạn
    Bài viết của bạn rất dễ hiểu tuy nhiên mình mới biết đến blog trong thời gian gần đây thôi.. không biết bài viết này của bạn có''áp dụng'' được cho blog opera ko? mình rất muốn biết...

    ReplyDelete
  16. Bạn ơi, blog mình nó bị cái Main và 2 cái Sidebar dính với nhau, làm cách nào cho chúng tách nhau ra vậy.
    Giúp mình với nhé, cảm ơn bạn. Blog mình đây:

    http://giang127.blogspot.com/

    ReplyDelete
  17. Mình chỉ tìm thấy đc Side-bar và footer chứ ko thấy Main & Header thì sửa thế nào đây ta ???
    Ghé http://chandai.hot.to/ xem blog mình nhé.
    Thank'z All

    ReplyDelete
  18. hi minh thiet ke blog cua minh vay dep k cac ban cho minh y kien nha
    http://zinglove.blogspot.com/

    ReplyDelete
  19. minh o blog 360plus ban co the chi dan minh cach trang tri no ko doc bai cua ban minh ko hieu lam

    ReplyDelete
  20. Cam on ban nhe. http://www.simvip.co.cc

    ReplyDelete
  21. thanks bai viet cau anh ,hiihi.no se hoan thien hon nhiu khi co bai viet moi voi thuthuat cua admin .!

    ReplyDelete

Cám ơn đã đọc bài viết. Bạn có thắc mắc, gợi ý hoặc bình luận xin chia sẻ bên dưới. Hãy viết bằng tiếng Việt có dấu để mọi người dễ đọc hơn. Xin đừng spam!

Do gần đây nhận rất nhiều spam bán thuốc từ nước ngoài, tạm thời để bình luận bạn bắt buộc phải có tài khoản OpenID hoặc Google. Chức năng này sẽ được khôi phục khi trình trạng spam được cải thiện. Xin lỗi về sự bất tiện này.