Hiệu ứng tải khi đăng nhận xét cho Blogger

Hôm nay mình xin chia sẻ với các bạn một hiệu ứng nhỏ khi người dùng đăng nhận xét. Hiệu ứng tải là gì? Mình tiết kiệm cho tiêu đề nên khó hiểu ấy mà, hiệu ứng này đơn giản nó hầu như tương tự với hiệu ứng tải trang mà mình đã có dịp chia sẻ với các bạn trước đây. Khi người dùng nhấn vào nút "Xuất bản" ở khung nhận xét, thì khu vực đó sẽ hiện lên hiệu ứng loading và xuất hiện nhận xét đó.

Hiệu ứng tải khi đăng nhận xét cho Blogger

Hiệu ứng này thực chất rất là đơn giản, mình ở đây sẽ sử dụng một hình ảnh loading mà mình kiếm được trên mạng, sau đó sử dụng CSS chèn vào background của khu vực đó. Thế làm sao mà nó ra hiệu ứng tại được vậy? Cái hình mà mình đặt background nó nằm ở dưới khung nhận xét, có nghĩa là khung nhận xét đã đè lên và che mất đi hình ảnh đó. Điều làm nên điều kì diệu ở đây là khi người dùng nhấn vào nút "Xuất bản" thì khung nhận xét sẽ bị ẩn đi khoảng vài giây làm cho background này xuất hiện và tại nên hiệu ứng tải tại khung nhận xét.

Quá là đơn giản mà hay phải không nào, hoàn toàn không sử dụng jQuery hoặc JavaScript để biến tấu như hiệu ứng tải tải trang mà hồi trước mình chia sẻ. Không lằng nhằng nữa đây là đoạn css đó, bạn chỉ cần chèn lên thẻ ]]></b:skin> là phép màu xuất hiện

#comment-editor {background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdGCk9oEw1iHVw9qdiIOOswNAtUBYG8uaNpeXetUou5WdlAjBArJ50n6t4D8W7eEZQyZ5GgYn9C1ZSWIVs4dOu_smj7zli5_9gieLwtXIHo_E1qJV9T3fNO_D_YeXKF_4V4ZpTq8nyNN1/s1600/ajax-loader+(2).gif') no-repeat 50% 30%}

bạn có thể thay thế hình ảnh này bằng bất cứ hình ảnh nào khác mà bạn thích.

Lời kết

Đây là một mẹo vô cùng đơn giản, hi vọng rằng sau khi mình diễn giải thì các bạn nào hiểu có thể sử dụng nó để cho cách thành phần khác có trên blog nữa. Mọi thắc mắc về bài viết này hãy để lại cho mình tại khung nhận xét phía dưới nhé.
Các Bạn Có Thể Bình Luận Phía Dưới để Test :v

Share :

Tweet

✚