Hướng dẫn làm đẹp bố cục cho template blogger

[tintuc]

Nhiều template blogger  do 1 số lý do thiết kế hoặc do rip mẫu blogger  mà có bố cục không được đẹp hay bố cục xếp không theo ý muốn của các bạn .
Hôm nay mình sẽ Hướng dẫn các bạn cách làm đẹp bố cục cho mẫu blogger.

Bước 1: Đăng nhập vào blogspot và chọn mẫu --> chỉnh sửa HTML.

Bước 2: Tìm cặp thẻ sau: <b:skin><![CDATA[ và paste các đoạn code sau dưới nó.
1. Xóa các dấu chấm đen do thẻ <li> gây ra chèn đoạn code sau bên dưới <b:skin><![CDATA[ .

body#layout ullist-style-type:none;list-style:none

  body#layout ul lilist-style-type:none;list-style:none

2. Xếp bố cục lại các thành phần như header, bài post ( main) Sidebar, footer...
- Ở đây các bạn cần xác định được .class, hoặc #ID chứa các thành phần trên.

Ở đây việc xác định như nào thì thì các bạn chỉ cần vào web click chuột phải chọn kiểm tra phần tử ( dòng cuối cùng - trình duyệt coccoc, chrome....) rồi xem thẻ div cuối cùng chứa tất các phần tử ở phần ( sidebar, main, footer...) có class hay ID gì? 

1 số css cơ bản các bạn cần biết:

- Width: ( chiều rộng có đơn vị là px hoặc %) 60%...

background: ( mầu nền cho phần tử) #333333 ( là mã màu) Hoặc Url(#Link ảnh)

- float: xác định thành phần trôi ( có thể qua trái float:left; qua phải float:right)
- overflow: Tạm hiểu tràn nội dung nếu khung chứa không đủ...overflow: hidden là tp tràn sẽ được dấu đi
-Clear:both  tạm hiểu là ngăn chặn sự chiếm vùng của phần tử khác khi dùng float còn thừa.
Ví dụ:
Cấu trúc mẫu có HTML như sau

<div class='content'>
    <div class='header'></div>
    <div class='sidebar'> </div>
    <div class='baiviet'></div>
    <div class='footer'></div>
</div>
bạn muốn thiết kế sidebar sang trái, mail bài post sang phải thì chèn code dưới vào dưới <b:skin><![CDATA[.

body#layout .content overflow: hidden;clear: both; /* Chứa phần chính blogspot và sidebar */

body#layout .baiviet width:66%;float:right; /* Phần chính của blog */

body#layout .sidebar width:34%;float:left; /* Phần sidebar */

Nếu bạn muốn ẩn 1 thành phần nào đó trong bố cục các bạn có thể dùng lệnh sau

body#layout .Classsmuonan display:none ( Classmuonan là Class mà bạn muốn ẩn)

Dựa vào Hướng dẫn chi tiết trên, bạn có thể design riêng cho giao diện blogspot, có thêm background màu mè cho đẹp, background ảnh chứa logo của bạn để thể hiện cá tính của bạn . 

Chúc bạn có một  Template blogger chuẩn seo  và chuyên nghiệp.

[/tintuc]