Hướng dẫn chi tiết làm đẹp bố cục cho blogspot

{tocify} $title = {Mục lục bài viết}

[tintuc]

Nhiều template blogspot  do 1 số lý do thiết kế hoặc do rip mẫu blogspot  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 blogspot .

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 blogger , có thêm background mầu mè cho đẹp, background ảnh chứa logo của bạn để thể hiện bản quyền của bạn . 

Chúc bạn có một  template blogspot tối ưu seo  và chuyên nghiệp.

[/tintuc]