6/8/13

Xóa đường viền của ảnh trên blog

Đăng bởi Admin | 6/8/13 | 0 nhận xét


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ọạ:
Xóa đường viền của ảnh cho Blogspot
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:
Xóa đường viền của ảnh cho Blogspot
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 Mẫu (Template)

3. Vào Chỉnh sửa HTML (Edit HTML) (không cần chọn mở rộng tiện ích) => Chọn Tiếp tục(Continue) => Xem video:
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à đượcpadding (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!

                                                                   
                                                                                                                           Thu thuat vi tinh

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva