Hướng dẫn tạo hiệu ứng load trang cho blogspot
[blog]
Hướng dẫn các bạn tạo hiệu ứng load trang cho blogspot, trong quá trình load trang sẽ xuất hiện icon loading, khi trang được tải xong thì icon sẽ ẩn đi.
1. Đầu tiên các bạn copy CSS đặt trước thẻ </head> hoặc trong <b:skin> bạn chỉ cần copy nội dung bên trong <style> </style>
2. Tiếp theo copy đoạn jQuery dán trước thẻ đóng </body>
3. Cuối cùng copy html dán dưới thẻ <body>
Sau đó bạn lưu lại và mở trang blog để kiểm tra.
Một số icon loading trong quá trình làm blog mình có sưu tầm lại, các bạn copy link và thay thế icon loading ảnh .gif link CSS ở bên trên.
Để blog chạy được đoạn jQuery thì blog phải có thư viện jQuery, đa số blog bào cũng có, nếu blog không có thì các bạn cần cài đặt thêm. Các bạn copy dán trước thẻ đóng </head>
Trên đây là hướng dẫn tạo hiệu ứng loading cho blogspot, chúc bạn thành công.
[/blog]
Hướng dẫn các bạn tạo hiệu ứng load trang cho blogspot, trong quá trình load trang sẽ xuất hiện icon loading, khi trang được tải xong thì icon sẽ ẩn đi.
<style>
#status{width:200px;height:200px;position:fixed;left:50%;z-index:100;top:50%;background-image:url(https://1.bp.blogspot.com/-0JEqyvn9iZM/XugT7Sm0AZI/AAAAAAAAM50/RevtUAlVysIgYsoTYtZRCG625PkWpPdXACLcBGAsYHQ/s1600/Preloader_61.gif);background-repeat:no-repeat;background-position:center;margin:-100px 0 0 -100px;z-index:1001}
#loader{position:fixed;top:0;left:0;right:0;width:100%;height:100%;background-color:#FFF;z-index:1000}
</style>
2. Tiếp theo copy đoạn jQuery dán trước thẻ đóng </body>
<script>
//<![CDATA[
$(window).bind("load", function() {
jQuery("#status").fadeOut();
jQuery("#loader").fadeOut();
});
//]]>
</script>
3. Cuối cùng copy html dán dưới thẻ <body>
<div id='status'></div> <div id='loader'></div>
Sau đó bạn lưu lại và mở trang blog để kiểm tra.
Một số icon loading trong quá trình làm blog mình có sưu tầm lại, các bạn copy link và thay thế icon loading ảnh .gif link CSS ở bên trên.
Để blog chạy được đoạn jQuery thì blog phải có thư viện jQuery, đa số blog bào cũng có, nếu blog không có thì các bạn cần cài đặt thêm. Các bạn copy dán trước thẻ đóng </head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
Trên đây là hướng dẫn tạo hiệu ứng loading cho blogspot, chúc bạn thành công.
[/blog]