Chính sáchBảng giáThanh toánLiên hệFeedback

Lấy logo làm hiệu ứng Preload cho blogspot

Zalo 0971539681 Tư vấn & Hỗ trợ
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é!
Hướng dẫn cách Lấy logo làm hiệu ứng Preload cho blogspot, Tạo hiệu ứng chờ tải trang (Preload) trong Blogger bằng logo, giúp bạn quảng cáo thương hiệu tới khách hàng truy cập.

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


Cách làm đơn giả như sau:

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


.align-items-center{-ms-flex-align:center!important;align-items:center!important}
.justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}
.d-flex{display:-ms-flexbox!important;display:flex!important}
.preloader{background-color:#f7f7f7;width:100%;height:100%;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999999;-webkit-transition:.6s;-o-transition:.6s;transition:.6s;margin:0 auto}
.preloader .preloader-circle{width:100px;height:100px;position:relative;border-style:solid;border-width:3px;border-top-color:#fc3f00;border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent;z-index:10;border-radius:50%;-webkit-box-shadow:0 1px 5px 0 rgba(35,181,185,0.15);box-shadow:0 1px 5px 0 rgba(35,181,185,0.15);background-color:#ffffff;-webkit-animation:zoom 2000ms infinite ease;animation:zoom 2000ms infinite ease;-webkit-transition:.6s;-o-transition:.6s;transition:.6s}
.preloader .preloader-circle2{border-top-color:#0078ff}
.preloader .preloader-img{position:absolute;top:50%;z-index:200;left:0;right:0;margin:0 auto;text-align:center;display:inline-block;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);padding-top:6px;-webkit-transition:.6s;-o-transition:.6s;transition:.6s}
.preloader .preloader-img img{max-width:55px}
.preloader .pere-text strong{font-weight:800;color:#dca73a;text-transform:uppercase}
@-webkit-keyframes zoom{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.6s;-o-transition:.6s;transition:.6s}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:.6s;-o-transition:.6s;transition:.6s}}
@keyframes zoom{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:.6s;-o-transition:.6s;transition:.6s}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:.6s;-o-transition:.6s;transition:.6s}}

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


<div id="preloader-active">
  <div class="preloader d-flex align-items-center justify-content-center">
    <div class="preloader-inner position-relative">
      <div class="preloader-circle"></div>
      <div class="preloader-img pere-text">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv5bWw7lXCVdQAQoxS6s4VyL9bCWNxlRcRBAPJg1l0JztuxBBzDYDqZnFNkaXB7QjTW-0xMyzPVHU33HgtAa3nTXBGkfOuUI0bM8P60zQ6U2SMtGwreDe97zOmlHvZHVvxk9vuU8Hj7_zL/s0/logo.png" alt="logo" />
      </div>
    </div>
  </div>
</div>

Bước 3: Thêm JS trước thẻ </body>


<script>
  $(window).on('load', function() {
    $('#preloader-active').delay(450).fadeOut('slow');
    $('body').delay(450).css({
      'overflow': 'visible'
    });
  });
</script>

Hoặc với đoạn JS có nhiều cách để xử lý, các bạn có thể viết như sau:


<script>
  $(window).bind("load", function() {
    $('#preloader-active').delay(1000).fadeOut(500);
  })
</script>


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ư vậy là bạn đã Lấy logo làm hiệu ứng Preload cho blogspot một cách đơn giản.


Chúc các bạn có một mùa Giáng Sinh an lành!

Tags:

Nhận xét

Đăng nhận xét

Mẫu tiếp thị liên kết

Xem thêm
Contact Me on Zalo