Hướng dẫn cách trang trí cho phần bố cục của Blogger

Trong bài viết trước mình có hướng dẫn cách chia cái header làm 2. Tuy nhiên, khi vào bố cục thì nó lại là 1 cái trên và 1 cái dưới. Vậy chúng ta phải làm gì để có thể cho chúng hiển thị ngang hàng như trên trang chủ?

Câu trả lời là chúng ta cũng chỉ cần dùng 1 chút CSS mà thôi. Đặc biệt hơn là chúng ta chỉ việc thêm #layoutvà trước css của ID/Class mà chúng ta cần căn chỉnh.

Ví dụ: trong bài viết trước mình có tạo ra class là header-trai để hiển thị tên trang web trên trang chủ. thì giờ mình chỉ việc thêm #layout và trước .header-trai để căn chỉnh nó trong phần bố cục. Như vậy, ta sẽ được một cái mới là #layout .header-trai.

Chúng ta hoàn toàn có thể thêm đoạn CSS này vào ngay trong phần CSS của thẻ <b:skin>. Tuy nhiên, như vậy hơi rườm ra cho việc viết CSS sau này. Mình khuyên các bạn nên thêm nó vào trong thẻ này, để dễ dàng hơn tron việc chỉnh sửa. Ta chèn đoạn này ngay dưới <b:skin> cho tiện nhé.

<b:template-skin><![CDATA[
    Nội dung CSS
]]></b:template-skin>

Lưu ý: Thẻ b:template-skin chỉ hoạt động trên blogger v2. cho nên ta phải thêm b:version=’2′ class=’v2′ vào trong thẻ <html> nhé. Sẽ thành thế này <html b:version=’2′ class=’v2′ …

OK, bây giờ, chúng ta sẽ thử với hai class ta đã tạo ở bài viết trước nhé. Và đây là đoạn CSS của mình.

#layout .header-trai {
width: 30%;
float: left;
}
#layout .header-phai {
width: 70%;
float: right;
}

Và kết quả sẽ được như hình dưới đây:

can chinh cho phan bo cục blogger

Với các phần khác cũng tương tự như vậy nhé!

Bài viết cùng Serie<< Cách chia header làm 2 phần, một bên logo và 1 bên quảng cáoHướng dẫn hiển thị danh sách bài viết ra ngoài trang web >>
Chia sẻ bài viết:

Bài viết liên quan:

Đọc nhiều cùng chuyên mục:

Add Comment

2 Comments

  1. leemindinh
    1 Bình luận
    15/07/2016
    • Đôi Guốc Mộc
      Admin
      15/07/2016