Demo trực tiếp ở bài này
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:
Also Read :Thêm hiệu ứng Preload trang cho Blogger
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>
Also Read :Thêm hiệu ứng Preload trang cho blogspot
<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>
Xem thêm nhiều thủ thuật hay cho blogspot