Hiệu ứng thay đổi ảnh khi rê chuột cho Blogspot

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) - Cách tạo hiệu ứng cho ảnh trên blog có rất nhiều cách, và hôm nay mình sẽ giới thiệu đến các bạn một thủ thuật tạo hiệu ứng khá đơn giản. Với thủ thuật này, khi bạn rê chuột vào một ảnh nào đó nó sẽ thay đổi thành ảnh khác và trả về ảnh ban đầu khi bạn lấy chuột ra khỏi ảnh. Thủ thuật này không đòi hỏi cao nó rất đơn giản bạn chỉ cần thêm 2 lệnh "onmouseout" và "onmouseover" vào thẻ IMG là được.

1. Đăng nhập tài khoản Blogger
2. Vào thiết kế
3. Chọn thêm tiện ích
4. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<img width="200" height="170" alt="Image01" onmouseout="this.src='https://lh6.googleusercontent.com/_BTztXRwC9ik/TSXvML9UPpI/AAAAAAAAGZQ/5T0Pn8NED4M/images.jpg'" onmouseover="this.src='https://lh6.googleusercontent.com/_BTztXRwC9ik/TQnofCg80qI/AAAAAAAAFsc/DvdnznGHdnI/Screenshot-1.png'" src="https://lh6.googleusercontent.com/_BTztXRwC9ik/TSXvML9UPpI/AAAAAAAAGZQ/5T0Pn8NED4M/images.jpg" />

- Link ảnh màu xanh dương chính là link ảnh hiển thị ban đầu khi bạn chưa rê chuột vào ảnh và link màu xanh lá chính là ảnh hiện ra khi bạn rê chuột vào ảnh bạn thay thành các link ảnh của bạn.
- Bạn có thể thay đổi độ rộng (width) và chiều cao (height) cho ảnh dựa vào phần màu đỏ trong code.

5. Save tiện ích lại

Ngoài ra bạn cũng có thể thêm code ngay trong phần khung soạn thảo của Blogger, tức bạn có thể sử dụng hiệu ứng này cho ảnh trong bài viết.

Chúc bạn thành công

Chuyên mục: Blogspot cơ bản