Hiệu ứng loading ngoài việc giúp người xem blog của bạn đỡ nhàm chán khí phải chờ đợi mỗi khi Blog đang load, mà nó còn giúp mang lại phong cách riêng cho blog của bạn nếu bạn vận dụng nó một cách hợp lý.
Đoạn javascrip được TGB giới thiệu ở đây khá nhẹ, nên bạn không cần phải lo lắng vì nó sẽ làm giảm tốc độ load của web bạn.
☼ Cách thêm hiệu ứng loadding sử dụng cho blogger
Bước 1: Bạn vào Chỉnh sửa HTML trong BlogspotBước 2: Dán đoạn code bên dưới trước thẻ </body> (bạn có thể copy full code ở cuối bài viết)
<style>
#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBAxZ0Xw18HMp73x4VWdDfU4WM16I0etkQxUPhEmEX5PiMxNWI8n481A4w2ZKWBtFott-wkyjpcEATkXvT1z_H_XxvuOLdq40OhFV393bsYa0dwJwEN_58hS3QeprjaPa1OPzA2Ql63VQ/s1600/loadding+google++.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">
Loading...</div>
');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBAxZ0Xw18HMp73x4VWdDfU4WM16I0etkQxUPhEmEX5PiMxNWI8n481A4w2ZKWBtFott-wkyjpcEATkXvT1z_H_XxvuOLdq40OhFV393bsYa0dwJwEN_58hS3QeprjaPa1OPzA2Ql63VQ/s1600/loadding+google++.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">
Loading...</div>
');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
Tùy chỉnh:
- Bạn có thể thay link ảnh màu hồng thành link ảnh của bạn. Hoặc chọn một số hình ảnh loadding mà mình cung cấp ở cuối bài viết này nha:
- top: 0; Là vị trí của ảnh loadding so với lề trên.
- right: 0; Là vị trí của ảnh loadding so với lề phải.
- bottom: 0; Là vị trí của ảnh loadding so với lề dưới.
- left: 0; Là vị trí của ảnh loadding so với lề trái.
☼ Một số hình ảnh loadding đẹp:
No comments :