Tuy phần bố cục này chỉ admin (người quản trị) của blog xem được nhưng vấn đề làm đẹp nó để bắt mắt, dễ nhìn lại rất cấp thiết. Bạn sẽ thấy thế nào khi template có quá nhiều tiện ích mà lúc vào bố cục chỉnh sửa thì lại thấy chúng nằm rời rạc và lệch chưa kể đến các lỗi khác, thật bất tiện đúng không nào?
Mình sẽ chia làm 2 phần để các bạn dễ nhận biết và có thể áp dụng hướng dẫn này một cách dễ dàng nhất:
1. Xác định phiên bản (version) của template
2. Hướng dẫn làm đẹp chi tiết
I. Xác định phiên bản (version) template
Vì thủ thuật này chỉ áp dụng được cho template blogspot version 2 nên cần xác định đúng phiên bản của tempalte thì mới có thể áp dụng thành công được.Để nhận biết template của bạn là version nào thì các bạn vào Mẫu > Chỉnh sửa HTML. Các bạn để ý dòng code thứ 3 (thường là vậy) theo số thứ tự, bắt đầu của đoạn là <html ...
- Nếu CÓ dòng b:version='2' class='v2' thì các bạn có thể đến phần 2 để áp dụng thủ thuật làm đẹp cho bố cục.
- Còn nếu KHÔNG CÓ dòng b:version='2' class='v2' thì các bạn thêm nó vào trong <html và đến phần 2 để áp dụng thủ thuật.
Hình ảnh minh họa cho template để áp dụng thủ thuật này:
II. Hướng dẫn làm đẹp phần Bố cục (Layout)
Sau đi đã xác định được phiên bản của template thì chúng ta có thể dễ dàng áp dụng thủ thuật để làm đẹp cho blogspot. Nó cũng giống như chỉnh sửa template bằng cách thêm css cho các thuộc tính nhưng cần thêm đoạn body#layout trước mỗi css.Đầu tiên các bạn thêm đoạn code sau dưới </b:skin>
<b:template-skin><![CDATA[
NỘI DUNG CSS PHẦN BỐ CỤC
]]></b:template-skin>
Tiếp đến các bạn cần xác định rõ thành phần của từng tiện ích (widget) để css lại cho chúng ở phần bố cục.
Ví dụ 1: Ta thấy khi vào bố cục xuất hiện các dấu chấm, ta biết rằng đó chính là các thẻ <ul> <ol> <li> nên chúng ta sẽ thêm css sau vào để ẩn chúng đi.
<b:template-skin><![CDATA[
body#layout ul,body#layout ol,body#layout li{list-style:none;padding:0}
]]></b:template-skin>
Xem thêm: Sửa lỗi ảnh blogspot không hiển thị như thế nào?
Ví dụ 2: Thuộc tính Header ở template (của mình) là .the-logo {float: left; width: 160px}, nên khi muốn chỉnh sửa cho phần Header ở phần bố cục có chiều dài rộng ra thì thêm css như sau:
<b:template-skin><![CDATA[
body#layout .the-logo {width: 96%;height:auto;}
]]></b:template-skin>
Hình ảnh minh họa (ở blog của mình) sau khi đã áp dụng thủ thuật làm đẹp phần Bố cục (Layout) cho Blogspot:
Chúc các bạn thành công !
Từ khóa tìm kiếm: Lam dep bo cuc blogspot, chinh sua layout blogspot, làm đẹp phần layout cho blogger, chinh sua phan bo cuc cho blog,...
hướng dẫn chi tiết quá. Cám ơn ad nhé !
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteCho mình hỏi blogspot của mình k có hai bên lè thì sao ạ, giúp với
ReplyDeleteLà class thì body#layout .the-logo{
ReplyDeleteNếu là id thì thế nào?
Là class thì body#layout .the-logo{
ReplyDeleteNếu là id thì thế nào?
sieuthihoanggiaSiêu thị mua sắm hàng gia dụng, mẹ và bé, sức khỏe và sắc đẹp, mỹ phẩm.
ReplyDelete