Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!
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:
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>
Xem thêm nhiều thủ thuật hay cho blogspot
Bài viết: Thêm hiệu ứng Preload trang cho blogspot được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.
Nhận xét
Đăng nhận xét