Nếu bạn đang sử dụng Blogger để làm website thì việc căn chỉnh bài viết cho đẹp là điều vô cùng quan trọng bởi nó ảnh hưởng đến người đọc có muốn xem bài viết đó hay không. Tuy nhiên tại Blogger khi bạn thêm hình ảnh vào bài viết bạn sẽ thấy bị lệch sang bên phải một chút, sẽ khiến bài viết có vẻ xấu xí.
Cách sửa hình ảnh bị lệch trong bài viết cho Blogger
Cụ thể, khi chúng ta upload một ảnh mới lên Blogger sẽ tự động chèn thuộc tính "margin-left: 1em; margin-right: 1em", khiến cho ảnh trong bài viết sẽ bị lệch. Đây là hành động và mã mặc định mà Blogger thêm vào khi bạn chèn một hình ảnh vào bài đăng trên blog của mình.Ví dụ về HTML được tạo ra mặc định khi đăng các liên kết hình ảnh:
<a href="(link URL)" style="margin-left: 1em; margin-right: 1em;"> <img src="(image URL)" /></a>Cách 1:
Chúng ta không thể xóa bỏ điều này bởi vì Blogger thêm theo mặc định vào các thẻ liên kết của hình ảnh nhưng chúng ta có thể sử dụng CSS để khắc phục việc này.
Các bạn thêm CSS sau vào blog của bạn (Để thêm CSS, các bạn vào phần Theme > Customize > Advanced > Add CSS)
.separator a {
margin-left: 0 !important;
margin-right: 0 !important;
}
Cách 2:
Các bạn vào Theme > Edit HTML và thêm đoạn code này ngay bên trên thẻ đóng
Như vậy là xong. Giờ đây bạn đăng bài và hình ảnh trong bài viết sẽ không bị lệch nữa.
</head>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
$('.post-body').find('img').each(function(n, image){
var image = $(image);
image.parent().css('margin-left',0).css('margin-right',0).css('margin-top',0).css('margin-bottom',0);
});
});
//]]></script>
Như vậy là xong. Giờ đây bạn đăng bài và hình ảnh trong bài viết sẽ không bị lệch nữa.
Chúc các bạn thành công!
Tags:
blogger
