Cách bỏ đường viền mặc định quanh hình ảnh cho Blogger

Trong mẫu mặc định của Blogger thì các hình ảnh sẽ tự động có một đường viền xung quanh. Hầu hết các Blogger mới thì đều không quan tâm tới đường viền này, thậm chí họ còn không biết đến sự tồn tại của nó. Đến khi các Blogger đó đã bắt đầu biết thiết kế blog thì một số người thấy rằng: đường viền đó không phù hợp với giao diện blog của họ, nó làm cho giao diện blog bị xấu đi. Trong trường hợp như vậy thì ta cần loại bỏ đường viền đó đi. Bài hôm nay của mình sẽ hướng dẫn các bạn cách xóa viền cho toàn bộ hình ảnh trên Blog và chỉ xóa viền cho một số hình ảnh. Trên bài viết này mình cũng đã loại bỏ đường viền cho hình ảnh, các bài khác thì đường viền còn nguyên.

#Xóa viền cho một số hình ảnh

Nếu bạn chỉ muốn xóa viền cho một vài hình ảnh thuộc một vài bài viết nào đó thì hãy làm cách này.

1. Tải ảnh và thêm ảnh vào bài viết bình thường

2. Chuyển sang chế độ soạn thảo HTML

3. Tìm đến đoạn code của hình ảnh, nó có dạng như dưới

<a href="http://1.bp.blogspot.com/-OjZ1b_2h1Fc/VH68zimhvII/AAAAAAAABVY/_GcvJNcFzoE/s1600/khoa.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-OjZ1b_2h1Fc/VH68zimhvII/AAAAAAAABVY/_GcvJNcFzoE/s1600/khoa.png" height="252" width="640" /></a>

4. Thêm thuộc tính style="border-style:none;" vào trước thuộc tính border="0" và ta được code tương tự như dưới

<a href="http://1.bp.blogspot.com/-OjZ1b_2h1Fc/VH68zimhvII/AAAAAAAABVY/_GcvJNcFzoE/s1600/khoa.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img style="border-style: none;"  border="0" src="http://1.bp.blogspot.com/-OjZ1b_2h1Fc/VH68zimhvII/AAAAAAAABVY/_GcvJNcFzoE/s1600/khoa.png" height="252" width="640" /></a>

5. Bây giờ thì đường viền đã được loại bỏ, bạn hãy chuyển sang chế độ soạn thảo thường và tiếp tục viết.

#Xóa viền cho toàn bộ hình ảnh - mẫu Dynamic Views Templates

Nếu bạn đang sử dụng Dynamic Views Templates - chế độ xem động mà muốn loại bỏ hết đường viền hình ảnh thì hãy sử dụng cách này.
1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Tìm thẻ ]]></b:skin>
4. Dán code dưới vào trước(trên) thẻ vừa tìm

.entry-content img{
box-shadow: none !important;
padding: 0px !important;
border: 0px !important;
}

5. Lưu lại

#Xóa viền cho toàn bộ hình ảnh - các mẫu templates còn lại

Nếu bạn không sử dụng mẫu Dynamic Views Templates thì hãy áp dụng cách này để loại bỏ đường viền cho toàn bộ hình ảnh.
1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Tìm một đoạn code trông như dưới, các bạn chỉ cần tìm với đoạn màu đỏ là ra đoạn code bên dưới

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
 padding: $(image.border.small.size);
 background: $(image.background.color);
 border: 1px solid $(image.border.color);

 -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
 -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
 box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

4. Thay thế đoạn code vừa tìm bằng code dưới

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

5. Lưu lại.
Như vậy là mình giới thiệu xong 3 cách bỏ đường viền mặc định quanh hình ảnh cho Blogger, các bạn hãy áp dụng cho phù hợp với mục đính và template đang dùng.