• Wapmaster
    • Wapbuider
    • Wordpress
    • XenForo
    • Theme XenForo
    • Theme Wordpress
    • Hacking - Bảo mật
    • JohnCMS
    • All Shared Code
    • Blogger
    • Template Blogger
  • Học Lập Trình
    • Scritp - Js
    • Php - MySql
    • Html - Css
    • C#
    • Pascal
  • Đồ Hoạ
    • PhotoShop
    • PSD Tổng Hợp
    • Action
    • Fonts Tổng Hợp
    • ProShow Produce
    • Style Produce
    • AegiSub
  • Thủ Thuật
    • Thủ Thuật
    • Wapmaster
    • Blogger
    • Facebook
    • SEO
    • Kiếm Tiền Online
    • Chia Sẻ Coupon
  • Follow me
    • Twitter
    • Facebook
    • Google+
    • Youtube
    • ­­­



Trang chủ / Blogger / Thủ Thuật / Hiệu ứng tải khi đăng nhận xét cho Blogger

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

Jss   19:55   Blogger , Thủ Thuật   0  
Popular Posts
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/AVvXsEj4ed8RooXOXdU1_tp-SmUGyC50C6wsRDzjv7w8Y6axGNoz-Yo5NuMFiaZQots30esllkZ-2zQIqlnxgQO5bhW8l7jKSqcLpHd5FDL5FPZtqgrA5BkJ1qOfnYazgSUb5g1l2z0jGCdvMJpI/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 Share Share
Blogger Thủ Thuật
Administrator Administrator: HPT

Không điều gì là tồn tại mãi mãi cho đến lúc bạn ngừng cố gắng! Một cậu học sinh trung học luôn có ước mơ và hoài bão...Bạn hãy làm những việc bình thường bằng lòng say mê phi thường, thành công sẽ đến với bạn!!

CÓ THỂ BẠN SẼ THÍCH

Đang tải...

Không có nhận xét nào

Bài đăng mới hơn Bài đăng cũ hơn Trang chủ
  • Bạn bè
  • Nhận xét

Bài Viết Ngẩu Nhiên

Được tạo bởi Blogger.
Copyright © 2015- | Thủ thuật - Công Nghệ - Webmaster | All Right Reserved.
Tags : Share Code / PhoToShop / FaceBook Tips
Blog Được Phát Triển Bởi