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ớ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 >>

Chú ý: Nội dung trong các bài viết chỉ có tính chất tham khảo. Độc giả vui lòng tham khảo ý kiến của bác sĩ trước bất cứ áp dụng nào! Vui lòng liên hệ để gỡ bài nếu bạn thấy sai và không đúng! Blog xin chân thành cảm ơn!