Học Thiết Kế Website Online Miễn Phí

Tổng hợp kiến thức, tài liệu để bạn học thiết kế website online miễn phí. hướng dẫn học thiết kế website từ đơn giản đến nâng cao một cách hoàn thiện nhất

Liên Kết : Chuyển Nhà Thanh Hóa | Thiết Kế Website | Học Lái Xe OTo Tại Thanh Hóa |Chuyển Hà Hà Nội |

Tạo hiệu ứng khi di chuột vào ảnh trên Blogger

Share Button

Tạo hiệu ứng khi di chuột vào ảnh trên Blogger

Hướng dẫn cho các bạn một cách đơn giản để tạo hiệu ứng khi di chuyển chuột trên hình ảnh của website blogger.


Giới Thiệu :

   Đây là hiệu ứng mà chỉ khi bạn di chuột vào hình ảnh trên website được thiết kế trên nền tảng Blogger.

   Khi con chuột được di chuyển lên trên hình ảnh thì tự động hình mũi tên ( hình mũi tên là hình mặc định của con chuột ) sẽ được thay thế bằng một hình ảnh khác do bạn đặt.

   Rất có ích cho những website chuyên về hình ảnh. Có thể bạn sẽ đặt vào là số điện thoại Hotline hoặc những hình icon vô cùng ngộ nghĩnh. Tạo ấn tượng tốt cho website của bạn với khách hàng.

Ví dụ cụ thể luôn :

Tạo hiệu ứng khi di chuột vào ảnh trên Blogger

Bạn thấy gì không. mặc định là hình mũi tên của con chuột nhưng mình đã thay nó bằng một hình ảnh khác. Hiệu ứng này chỉ sảy ra khi nằm trên hình ảnh thôi nhé. tất cả các mục khác như văn bản, link liên kết… vẫn bình thường.

Tạo hiệu ứng khi di chuột vào ảnh trên Blogger

Code của chúng ta đây 

/*Code Hiệu ứng ảnh Blogger*/
.post-body img:hover{cursor: url(https://ngocmanhweb.com/wp-content/uploads/2017/07/chú-y.gif), progress;opacity:0.9}

Bạn có thể thay đổi nội dung màu đỏ.

Đây là link hình ảnh mà bạn muốn đưa vào làm hiệu ứng.

Hướng dẫn sử dụng code.

Cách 1 : vào hệ thống blogger >>> Chủ Đề >>> Tùy Chỉnh >>> Nâng Cao >>> Thêm Csss >>> Dán code trên vào.

Cách 2 : vào hệ thống blogger >>> Chủ Đề >>> Chỉnh sữa HTML >>> Dán code trên nằm trên đoạn ]]></b:skin>

ví dụ :

(code được copy ở trên )
]]></b:skin>

Xong rồi thì lưu lại và ra ngoài trang chủ để kiểm tra nhé.

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

Share Button

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Học Thiết Kế Website Online Miễn Phí © 2017 Frontier Theme