Thêm hiệu ứng Preload trang cho blogspot

Zalo 0971539681 Tư vấn & Hỗ trợ
Hướng dẫn các bạn cách thêm Hiệu ứng Preload trang cho blogspot, trong lúc chờ tải sẽ hiện hiệu ứng load trang sinh động và đẹp mắt.

Demo trực tiếp ở bài này

Thêm hiệu ứng Preload trang cho blogspot



Hiệu ứng Preload là gì? Hiểu nôm na là khi các bạn load trang, tải lại trang thì hiệu ứng sẽ được tải và được ưu tiên hiển thị trước, sau đó trang của bạn tải xong thì hiệu ứng tự động mất đi và trang của bạn được hiển thị.

Khi nào nên dùng hiệu ứng Preload trang cho blogspot? Theo mình thì blogspot nào cũng có thể thể thêm được tùy vô sở tích của từng cá nhân, và đặc biết những blog nên dùng hiệu ứng này là: Trong lúc tải trang bố cục bị méo mó, hiển thị xấu thì nên sử dụng hiệu ứng này để nó che đi khuyết điểm đó.

Các cài đặt hiệu ứng Preload trang cho blogspot như sau:

Bước 1: Thêm CSS trong thẻ <b:skin> ... </b:skin>


.body__preloader{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;background-color:#ffffff;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;opacity:1;visibility:visible}
.body__preloader.loaded{opacity:0;visibility:hidden;z-index:-2}
#loading{display:block;position:relative;z-index:1001;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#3498db;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}
#loading:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#e74c3c;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}
#loading:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f9c922;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes spin{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}

Bước 2: Thêm HTML dưới thẻ <body>


<div class='body__preloader'>
  <div id="loading"></div>
</div>


Bước 3: Thêm JavaScript trước thẻ đóng </body>


<script>
  $(window).bind("load", function() {
    $('.body__preloader').addClass("loaded");
  })
</script>

Sau khi thêm xong các bạn lưu lại và kiểm tra kết quả, như vậy là bạn đã Thêm hiệu ứng Preload trang cho blogspot thành công rồi đó.

Lưu ý blog phải sử dụng thư viện jQuery


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>


Nhận xét

×