Home » Blog » Blogspot » Cách tạo hiệu ứng phóng to ảnh cho Blogger cực đơn giản

Cách tạo hiệu ứng phóng to ảnh cho Blogger cực đơn giản

1/23/2021

1. Đăng nhập vào Blog

2. Vào mẫu (Template)

3. Chọn chỉnh sửa HTML.

4. Tìm ]]></b:skin> và chèn trước đó đoạn mã sau :

.hovergallery img{

-webkit-transform:scale(0.8);

-moz-transform:scale(0.8);

-o-transform:scale(0.8);

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

-o-transition-duration: 0.5s;

opacity: 0.7;

margin: 0 10px 5px 0;

}

.hovergallery img:hover{

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-o-transform:scale(1.1);

opacity: 1;

}

Từ giờ trở đi, khi muốn áp dụng hiệu ứng phóng to ảnh bạn chỉ cần chuyển sang chế độ HTML và sử dụng đoạn code

1 2	`<a class="hovergallery"` `href="http://nguyentien.net/"` `target="_blank">` `<img src="http://1.bp.blogspot.com/-ycrEcnVzJAs/TcXGWwcjL3I/AAAAAAAAAYQ/MiQNmK44ZOg/s200/fullblogtricks-blogger-icon.jpg"` `/></a>`

Thay http://nguyentien.net/ bằng link của bạn
Thay http://1.bp.blogspot.com/-ycrEcnVzJAs/TcXGWwcjL3I/AAAAAAAAAYQ/MiQNmK44ZOg/s200/fullblogtricks-blogger-icon.jpg bằng link ảnh

ÁP DỤNG HIỆU ỨNG ZOOM ẢNH CHO TẤT CẢ CÁC ẢNH TRONG BÀI VIẾT

Cái này, bạn cũng làm tương tự như trên

1. Đăng nhập vào Blog

2. Vào mẫu (Template)

3. Chọn chỉnh sửa HTML.

4. Tìm ]]></b:skin> và chèn trước đó đoạn mã sau :

.post img {

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.post img:hover {

width: 150%;

height:150%;

}