Bình luận

Thông báo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Share Code Hiệu Ứng Loading Cho Blogspot

Share Code Hiệu Ứng Loading Cho Blogspot, Hiệu Ứng Loading, Loading Cho Blogspot
2 min read

Hiệu Ứng Loading Cho Blogspot

Hello các bạn, chào mừng các bạn đã quay trở lại với bài viết tiếp theo của mình. Thủ thuật liên quan đến blog thì là vô hạn nên có share bao nhiêu cũng chẳng hết nên hôm nay mình sẽ lại share cho các bạn một thủ thuật nữa.

Share Code Hiệu Ứng Loading Cho Blogspot

Như các bạn đã nhìn tiêu đề cũng như là thumbnail hay khi các bạn ấn vào bài viết này, các bạn cũng có thể nhận ra bài này nói về cái gì rồi. Đúng vậy hôm nay mình sẽ chia sẻ cho các bạn code để tạo một hiệu ứng load trang như ở đầu bài viết nhé!

Demo Và Hướng Dẫn

Demo:

Mình cùng xem lại hiệu ứng một lần nữa nhé!

Hướng Dẫn:

Bước 1:

Coppy toàn bộ đoạn code dưới đây:


<style>
  .cat{position:fixed;width:100%;max-width:20em;overflow:hidden;background-color:#e6dcdc}.cat::before{content:"";display:block;padding-bottom:100%}.cat:hover > *{-webkit-animation-play-state:paused;animation-play-state:paused}.cat:active > *{-webkit-animation-play-state:running;animation-play-state:running}.cat__body,.cat__tail,.cat__head{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-animation:rotating 2.79s cubic-bezier(0.65,0.54,0.12,0.93) infinite;animation:rotating 2.79s cubic-bezier(0.65,0.54,0.12,0.93) infinite}.cat__body::before,.cat__tail::before,.cat__head::before{content:"";position:absolute;width:50%;height:50%;background-size:200%;background-repeat:no-repeat;background-image:url("https://imgur.com/X17ir1t.png")}.cat__head::before{top:0;right:0;background-position:100% 0%;transform-origin:0% 100%;transform:rotate(90deg)}.cat__tail{-webkit-animation-delay:0.2s;animation-delay:0.2s}.cat__tail::before{left:0;bottom:0;background-position:0% 100%;transform-origin:100% 0%;transform:rotate(-30deg)}.cat__body{-webkit-animation-delay:0.1s;animation-delay:0.1s}.cat__body:nth-of-type(2){-webkit-animation-delay:0.2s;animation-delay:0.2s}.cat__body::before{right:0;bottom:0;background-position:100% 100%;transform-origin:0% 0%}@-webkit-keyframes rotating{from{transform:rotate(720deg)}to{transform:none}}@keyframes rotating{from{transform:rotate(720deg)}to{transform:none}}.box{display:flex;flex:1;flex-direction:column;justify-content:flex-start;justify-content:center;align-items:center;position:fixed;background-color:#e6dcdc;z-index:1000;top:0;left:0;width:100%;height:100vh}
</style>
<div class='box'>
  <div class='cat'>
    <div class='cat__body'></div>
    <div class='cat__body'></div>
    <div class='cat__tail'></div>
    <div class='cat__head'></div>
  </div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script type='text/javascript'>
    $(window).load(function () {
        setTimeout(function () {
            $(".box").fadeOut("slow");
        }, 1000)
    });
</script>

Bước 2:

Dán toàn đoạn code bên trên vào trong phần body của template hoặc dán vào trang bất kì mà các bạn muốn ví dụ như bài đăng hay trang. Sau đó lưu lại!

Lời Kết

Vậy là mình đã chia sẻ cho các bạn cách để tạo hiệu ứng loading cho blogspot. Nếu có bất kì vấn đề nào về bản quyền hay cảm thấy thích bài viết này hãy để lại một comment ở bên dưới nhé. Chúc các bạn một tuần mới vui vẻ và cùng chung tay đẩy lùi dịch Covid nhé!

Copyright © Phạm Văn Linh

Đánh Giá Bài Viết:
No pain, no gain !

You may like these posts

9 comments

  1. second ago
    có hình chiếc chim không bạn. chứ con mèo này không hợp
    1. second ago
      Bạn thích con chim như nào để tôi làm
  2. second ago
    hay đấy a :3
    1. second ago
      Thế thì 5 sao thôi em
  3. second ago
    Blog Name :- Smart Tech Mukesh
    Blog Description :- Blogger Tips, Html, Css, JavaScript And Much More..
    Blog Url :- https://www.smarttechmukesh.online
    1. second ago
      Done bro, please link with me
  4. second ago
    Mình dán vào nó chạy mãi không dừng
    1. second ago
      Mình vẫn load bthg mà nhỉ
    2. second ago
      mình thử kiểm tra xem blogspot có sung đột không
© 2025Phạm Văn Linh. All rights reserved. Developed by Jago Desain

Đã phát hiện Ad Blocker

Vui lòng tắt trình chặn quảng cáo của bạn để tiếp tục!

  1. Click on the AdBlock icon in your browser.
    Nhấp vào biểu tượng AdBlock trong trình duyệt của bạn.
    Adblock
  2. Choose, Don't run on pages on this domain.
    Chọn "Always".
    Adblock
  3. The browser icon should have turned green.
    Biểu tượng trình duyệt phải chuyển sang màu xanh lá.
    Adblock
  4. Refresh the page if it didn't refresh automatically. Thanks!
    Làm mới trang nếu nó không tự động làm mới. Cảm ơn bạn rất nhiều!
  1. Click on the AdBlock Plus icon in your browser.
    Nhấp vào biểu tượng AdBlock Plus trong trình duyệt của bạn.
    Adblock
  2. Click the "This Website" button.
    Nhấp vào nút "Trang web này".
    Adblock
  3. The browser icon should have turned grey.
    Biểu tượng trình duyệt phải chuyển sang màu xám.
    Adblock