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.

Hướng dẫn tạo hiệu ứng load trang cho blogspot
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>

<style>

#status{width:200px;height:200px;position:fixed;left:50%;z-index:100;top:50%;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgziA5T4ywhGt1_eggZN38IcLt5vsbs8Tp8Z9TzATKUoi2ew-PoBl892BT2UBCrxWJLoTPygL37g719i1PcbS1eYjGNQjXAnpuewITbA192QwGRz2HjjsIgcF2pjJ9-vV5tMLavCaKdfjKK/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.

Hướng dẫn tạo hiệu ứng load trang cho blogspot

Hướng dẫn tạo hiệu ứng load trang cho blogspot

Hướng dẫn tạo hiệu ứng load trang cho blogspot

Hướng dẫn tạo hiệu ứng load trang cho blogspot

Hướng dẫn tạo hiệu ứng load trang cho blogspot

Hướng dẫn tạo hiệu ứng load trang cho blogspot

Hướng dẫn tạo hiệu ứng load trang cho blogspot

Hướng dẫn tạo hiệu ứng load trang cho blogspot

Hướng dẫn tạo hiệu ứng load trang cho blogspot

Hướng dẫn tạo hiệu ứng load trang cho blogspot

Để 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]

Bài viết cùng chủ đề: