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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 | .hovergallery img{ -webkit-transform:scale( 0.8 ); -moz-transform:scale( 0.8 ); -o-transform:scale( 0.8 ); -webkit-transition-duration: 0.5 s; -moz-transition-duration: 0.5 s; -o-transition-duration: 0.5 s; 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 |
- 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 :
1
2
3
4
5
6
7
8
9
10
11
12 | .post img { -webkit-transition: all 1 s ease; -moz-transition: all 1 s ease; -o-transition: all 1 s ease; -ms-transition: all 1 s ease; transition: all 1 s ease; } .post img:hover { width : 150% ; height : 150% ; } |
Trong đó
1
2 | width : 150% ; height : 150% ; |
Là chiều rộng, chiều cao của ảnh khi zoom.
Cuối cùng Save template lại và thử trải nghiệm
Hiệu ứng phóng to ảnh cho Blogger là 1 hiệu ứng rất phổ biến, được nhiều Blogger sử dụng. Còn bạn thì sao ?
Chúc các bạn thành công
Bài liên quan
Comments[ 0 ]
Post a Comment