[Blogspot] Thủ thuật làm đẹp cho giao diện bố cục (Layout) trong blogger

Vừa mới gần đây, tình cờ có đang đêm 1 cái Template về để nghiên cứu rồi chỉnh sửa thì thấy phần bố cục (layout) của nó đẹp quá trời là đẹp luôn. Toàn bộ mỗi vùng chọn (section) trong bố cục đều được tô màu lên làm 1 bố cục đơn giản, tẻ nhạt trở nên trang hoàng lộng lẫy, khoa học và bắt mắt hơn.
Mà sống là để chia sẻ mà, vì vậy mà hôm nay mình sẽ giúp các bạn có được 1 bố cục đầy màu sắc để tạo hứng thú chỉnh sửa blog hơn nhé :)

Thủ thuật tô màu cho bố cục (layout) trong blogger/blogspot

Cách thực hiện: Bước 1: Truy cập quản trị blogger - Bố cục.
Bước 2: Xác định Id - Class của Section.
Sử dụng chuột phải lên 1 vùng rồi click chọn Kiểm tra để xem thuộc tính của nó.
Ví dụ minh họa như bên dưới:

Đưa chuột đến vùng cần tô màu và click chuột phải, chọn Kiểm tra (Ctrl+Shift+I)

Các bạn có để ý đến class="ads-header1 section" ở 1 không? Để xác định class bạn giữ lại ads-header1 thôi và bỏ chữ section đi.

Ngoài ra để cho dễ hơn và đỡ nhầm lẫn thì hãy rê chuột hoặc click vào dòng 1, khi đó sẽ hiển thị ra như dòng 2. Tại đây các bạn để ý và lấy #ads-header1 (tức chữ màu cam) để làm bước tiếp bước 3 nhé!

Chọn id, class để thực hiện bước tiếp theo

Bước 3: Sau khi đã lấy xong Id - Class ở bước 2 ta chuyển sang Chủ đề - Chỉnh sửa HTML.

Từ Id đã lấy, các bạn dùng dòng CSS sau đây để thêm màu sắc cho Section đó.

#layout #id-class-của-section{background:#mã-màu}

Ví dụ:

#layout #ads-header1{background:#FF8000}

Bonus: Để làm màu cho các nút Chỉnh sửa (Edit) thì dùng đoạn Css dưới đây là xong!

body#layout .editlink{color:#FFF!important;background-color:#09AA56;padding:0 5px;display:block;right:0;bottom:0}
body#layout .editlink:hover{background-color:#AA095D}

Hãy thay đổi giá trị background-color:#mã-màu nếu bạn muốn đổi sang màu khác nhé. (như ở bố cục blog mình thì mình để là nền các nút Chỉnh sửa màu xanh lá cây giống ở các hình trên)

Tất cả Css đều chèn lên trước thẻ </b:template-skin>.

Bước 4: Lưu template lại và quay lại Bố cục xem đã có màu sắc chưa nhé ^^!

Ngoài ra, bạn cũng có thể sử dụng các thuộc tính padding và margin để chỉnh sửa lại vị trí của từng section sao cho đẹp mắt và hợp ý bạn nhất.

Chúc các bạn thành công :)

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!