Tạo hiệu ứng loading mang phong cách riêng cho Blogspot của bạn
Bước 1: Bạn vào Chỉnh sửa HTML trong Blogspot
Bướ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/AVvXsEiO_DnCFvdAWo_o2GUGSladfrMQ2dKvZQTqoitmYCK_BW2Z7I4olR6Nw_62oO8NCu4XrAS8o0-WquJ7STdoPOa9xDC2IrbsU6bSWQfjzKqdLwkDRD8VFEejd8GV-6eiGbnFErL7VUYAfVg/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/AVvXsEiO_DnCFvdAWo_o2GUGSladfrMQ2dKvZQTqoitmYCK_BW2Z7I4olR6Nw_62oO8NCu4XrAS8o0-WquJ7STdoPOa9xDC2IrbsU6bSWQfjzKqdLwkDRD8VFEejd8GV-6eiGbnFErL7VUYAfVg/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:
Bạn có thể tìm hiểu thêm: Tự tạo ảnh động loading vô cùng đơn giản cho website bạn
Bạn copy full code tại đây:
Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..
Được viết bởi Khánh Nguyễn
Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.
Nơi truy cập vào Nick của Tôi trên mạng:
0 Comments:
Đăng nhận xét