Xóa đường viền của ảnh cho Blogspot

Đây là một trong những kiến thức cơ bản về CSS, ở đây mình cũng xin giới thiệu cho các bạn chưa biết. Những ai biết rồi thì bỏ qua đừng chém mình nha (thủ thuật áp dụng cho nhưng template mặc định sẵn thuộc tính border cho ảnh).

Thực ra bình thường trong blog, nếu ta muốn post ảnh, thì chỉ cần đặt trong thẻ

<img src="{link ảnh}"/>

Ảnh minh họa :

Là mặc định nó sẽ không có đường viền bao quanh ảnh. Khi muốn tạo đường viền bao quanh ảnh thì ta chỉ cần thêm thuộc tính border vào là xong.
Ví dụ:

<img src="{link ảnh}" border="1"/>

Ảnh minh họa:

Tuy nhiên đối với 1 số template, mặc dù ta không gán thuộc tính border cho ảnh, nhưng ảnh post ra vẫn có dường viền bao quanh. Bạn cố gắng thêm thuộc tính border="0" vào để làm mất border của ảnh nhưng vẫn không có tác dụng. Điều này là do CSS trong tempate của bạn đã mặc định sẵn thuộc tính này. Như vậy chỉ còn cách vào CSS gỡ bỏ thuộc tính này mà thôi.
Mình đã test thử với blog của mình, trong CSS đã mặc định thuộc tính ảnh không có đường viền nên dù mình có gán border ="3" hay mấy đi nữa thì vẫn không xuất hiện border khi xuất bản bài viết.

Dưới đây là cách khác phục:
1. Đăng nhập vào blog
2. Vào bố cục (Layout)
3. Vào chỉnh sửa Code HTML (Edit Code HTML) (không cần chọn mở rộng tiện ích)
4. Tìm đọan code CSS sau (hoặc tương tự) :

.post img {
padding:4px;
border:1px solid $bordercolor; 
}

- Với thuộc tính CSS của ảnh trên, ảnh post ra sẽ được mặc định có đường viền, và được padding (thụt vào) từ 4 cạnh là 5px. Đọan CSS này thích hợp cho việc tạo các ảnh kiểu tạp chí, trông cũng khá ấn tượng.
- Và đọan code border:1px solid $bordercolor; chính là code tạo đường viền bao quanh ảnh. Xóa chúng đi nếu bạn không muốn xuất hiện đường viền này. và như vậy nó sẽ trông như thế này:

.post img {
padding:4px;
}

5. Save template của bạn lại. Như vậy đã xong.
Chúc các bạn thành công.

Chủ đề:
Blogspot-tips