Bài 2 - Sắp xếp làm đẹp bố cục blogspot

[tintuc]

Tiếp theo bài 1: Hướng dẫn thiết kế template blogspot cơ bản
Bài này mình sẽ hướng dẫn làm đẹp bố cục blogpsot, sắp xếp sao cho hợp lý dễ thao tác và quản lý nó.

Dưới </b:skin> bạn thêm
    <b:template-skin>
      <![CDATA[
]]>
    </b:template-skin>

Sau đó bạn thêm b:version='2' class='v2' vào chỗ html đầu tiên như hình dưới. Sau đó nhấn lưu lại

Giải thích: Template muốn có thẻ

    <b:template-skin>
      <![CDATA[
]]>
    </b:template-skin>

Bắt buộc phải có dòng này  b:version='2' class='v2' phiên bản 2 ý


Tiếp theo bạn copy dòng này dán vô trong thẻ <b:template>

body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}
body#layout .col-3 {width:25%; float:left}
body#layout .col-6 {width:50%; float:left;}

Giải thích nhé: 2 dòng đầu là xóa các dấu chấm xuất hiện ở bố cục
2 dòng sau là ta căn chỉnh độ rộng cho các cột (trai - phải)

Mẫu mình làm gồm có 3 cột (TRÁI - GIỮA - PHẢI)

TRÁI + PHẢI = 50% (chung class là .col-3)
GIỮA = 50% (class là .col-6)

Cách gọi CSS của bố cục là body#layout phía trước sau đó đến class css hoặc id css xem như trên

col-3 là 2 cột 2 bên (trái - phải)
col-6: là phần main nằm giữa hai cột kia (làm sau nhé)

Tổng kết: Với bài này mình đã hướng dẫn cách làm đẹp bố cục blogspot, hy vọng nó giúp ích cho các bạn mới bước chân vô blog.

Các bạn tải mẫu bài 2 tại đây : Link tải

Bài sau mình hướng dẫn cách lấy bài viết ra ngoài trang chủ

[/tintuc]