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

Nhiều template blogspot do một số lý do thiết kế, hoặc do rip template blogspot mà có bố cục không được đẹp. như các chấm đen của thẻ <li>... hay bố cục xếp không theo ý muốn của 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 template blogspot.

Các bước làm đẹp bố cục cho template blogspot

Yêu cầu: Có chút kiến thức về CSS. còn nếu không có thì cũng không cần vì ở đây mình viết khá cụ thể.
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 ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}

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

huong dan lam dep bo cuc cho template blogspot

Ở đây việc xác định như nào thì thì 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ì?
Một số css cơ bản 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 template 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 viết 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 blog 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 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 trên, bạn có thể thiết kế riêng cho template blogspot, 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 chuẩn seo và chuyên nghiệp.