Tạo hiệu ứng tải trang Blogspot chuyên nghiệp

Anh Trai Nắng
personAnh Trai Nắng
06 tháng 1
0

Có nhiều cách để làm đẹp giao diện của blog, một trong số đó là cài đặt hiệu ứng tải trước hay thường gọi là hiệu ứng tải trang blogspot.

Tạo hiệu ứng tải trang Blogspot chuyên nghiệp
Tạo hiệu ứng tải trang Blogspot chuyên nghiệp.

Hiệu ứng tải sẽ hoạt động khi trang blog được tải. Và nó mang lại ấn tượng như thể blog chúng ta đang truy cập mất rất nhiều thời gian để tải. Hiệu ứng tải này cài đặt trên blog sẽ biến mất sau khi trang được tải hoàn toàn.

Việc cài đặt hiệu ứng tải trên các trang blogspot sẽ không ảnh hưởng đến tốc độ tải blog của các bạn, điều này là do các hiệu ứng được sử dụng hoàn toàn sử dụng CSS và SVG mà không chèn hình ảnh.

Có một số tùy chọn hiệu ứng tải mà mình sẽ chia sẻ lần này, với từng mã CSS và HTML. Vì vậy bạn có thể lựa chọn theo ý muốn của mình. Được rồi, hãy đi thẳng vào vấn đề:

Cài đặt hiệu ứng tải trên trang blogspot

Đầu tiên, các bạn cài Js này vào template nhưng nếu phiên bản JQuery trong mẫu của bạn giống với phiên bản JQuery bên dưới thì bạn không cần thay đổi nó. Nếu khác, vui lòng thay thế bằng Thư viện JQuery Phiên bản 1.7.1 bên dưới:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

Các bước tiếp theo:

  • Vẫn trong Bảng điều khiển Blogger
  • Chọn Chủ đề -> Chỉnh sửa HTML
  • Chèn code sau trên thẻ đóng </body>
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}
</style>

Bước tiếp theo là thêm mã HTML bên dưới ngay bên dưới thẻ mở <body>

<div id='preloader'>
<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>
   <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
</svg>
</div>

Sau đó, Lưu và xem kết quả

(getButton) #text=(Kết quả) #icon=(link)

Đối với các tùy chọn hiệu ứng tải khác, bạn có thể tự quyết định xem mình thích hiệu ứng tải nào. Mình để sẵn một số tùy chọn hiệu ứng tải thú vị bên dưới, cài đặt như trên, bạn chỉ cần thay đổi HTML và CSS để thay thế hoặc sử dụng các hiệu ứng tải khác. Không cần phải thêm lại mã JQuery.

Hiệu ứng tải trước Dấu chấm đảo ngược

Code HTML

<div id='preloader'>
<div class='spinner'>
<ul class='loading reversed'>
      <li></li>
      <li></li>
      <li></li>
    </ul>
</div>
</div>

Code CSS

<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{list-style:none;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.loading.reversed li{list-style:none;border:3px solid #2b8ccd;animation:LOADING 2s infinite}
.loading.reversed li:nth-child(1n){animation-delay:0s}
.loading.reversed li:nth-child(2n){animation-delay:0.2s}
.loading.reversed li:nth-child(3n){animation-delay:0.4s}
.loading li{height:0;position:absolute;top:50%;left:0;width:0;margin:0;height:10px;width:10px;border:3px solid #2b8ccd;border-radius:100%;transform:transformZ(0);animation:LOADING 2s infinite}
.loading li:nth-child(1n){left:-20px;animation-delay:0s}
.loading li:nth-child(2n){left:0;animation-delay:0.2s}
.loading li:nth-child(3n){left:20px;animation-delay:0.4s}
@keyframes LOADING{0%{transform:scale(0.5);background:#2b8ccd}50%{transform:scale(1);background:#fff}100%{transform:scale(0.5);background:#2b8ccd}}
</style>
(getButton) #text=(Live Demo) #icon=(link)

Hiệu ứng tải trước Cầu vòng

Code HTML

<div id='preloader'>
<div id='container' class='spinner'>
  <div id='loader'></div>  
</div>
</div>

Code CSS

<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#00cec9;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#container{width:70px;height:35px;overflow:hidden;position:absolute;top:calc(50% - 17px);left:calc(50% - 35px)}
#loader{width:70px;height:70px;border-style:solid;border-top-color:#FFF;border-right-color:#FFF;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;box-sizing:border-box;animation:rotate 3s ease-in-out infinite;transform:rotate(-200deg)}
@keyframes rotate{0%{border-width:10px}25%{border-width:3px}50%{transform:rotate(115deg);border-width:10px}75%{border-width:3px}100%{border-width:10px}}
</style>
(getButton) #text=(Live Demo) #icon=(link)

Hiệu ứng tải trước Spinner Ball

Code HTML

<div id='preloader'>
<div class='spinner'>
  <span class='ball-1'></span>
  <span class='ball-2'></span>
  <span class='ball-3'></span>
  <span class='ball-4'></span>
  <span class='ball-5'></span>
  <span class='ball-6'></span>
  <span class='ball-7'></span>
  <span class='ball-8'></span>
</div>
</div>

Code CSS

<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50%;left:50%;z-index:1;height:40px;width:40px;transform:translate(-50%,-50%)}
[class^="ball-"]{position:absolute;display:block;left:30px;width:12px;height:12px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
</style>
(getButton) #text=(Live Demo) #icon=(link)

Hiệu ứng tải trước của Google Chrome

Code HTML

<div id='preloader'>
<div class='spinner'>
<div class='loader tri'></div>
<div class='loader tri2'></div>
<div class='loader tri3'></div>
<div class='loader tri4'></div>
<div class='loader circ'></div>
<div class='loader circ2'></div>
</div>
</div>

Code CSS

<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#ecf0f1;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.loader{border-radius:50%;margin:0 auto;position:absolute;top:40%;left:0;right:0;height:50px;width:50px}
.tri{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:0 solid transparent;border-bottom:60px solid #00b4ff;width:0;z-index:2}
.tri2{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:0 solid transparent;border-bottom:40px solid #ffde15;width:0;z-index:1}
.tri3{animation:translateRotation 1.5s infinite;border-left:40px solid transparent;border-right:40px solid transparent;border-top:40px solid #1da158;border-bottom:0 solid transparent;width:0;z-index:1}
.tri4{animation:translateRotation 1.5s infinite reverse;border-left:60px solid transparent;border-right:60px solid transparent;border-top:60px solid #ea343f;border-bottom:0 solid transparent;width:0;z-index:2}
.circ{border:30px solid rgba(255,255,255,0.1)}
.circ2{border:25px solid #ffffff;box-sizing:border-box;box-shadow:0 2px 1px rgba(0,0,0,0.15),0 -2px 1px rgba(0,0,0,0.15),-2px 0 1px rgba(0,0,0,0.15),2px 0 1px rgba(0,0,0,0.15);margin-top:30px;z-index:90}
@-webkit-keyframes translateRotation{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}
</style>
(getButton) #text=(Live Demo) #icon=(link)

Hiệu ứng tải trước Vòng tròn

Code HTML

<div id='preloader'>
<div id='loader'>
  <span class='spinner'></span>
</div>
</div>

Code CSS

<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#f5f6fa;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#loader{position:absolute;top:50%;left:50%;margin:-20px -50px;height:30px;width:30px;margin:auto;border:5px solid rgba(60,60,180,0.45);border-top:5px solid rgb(60,60,180);border-radius:50%;animation:rotate 1s infinite linear}
@keyframes rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
</style>
(getButton) #text=(Live Demo) #icon=(link)

Hiệu ứng tải trước Dấu chấm di chuyển

Code HTML

<div id='preloader'>
<div class='spinner'>
  <div class='loader'>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
    <div class='moving-dot'></div>
  </div>
</div>
</div>

Code CSS

<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center}
.loader{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
.moving-dot{animation-name:loader;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white}
.moving-dot:first-child{background-color:#8cc759;animation-delay:0.5s}
.moving-dot:nth-child(2){background-color:#8c6daf;animation-delay:0.4s}
.moving-dot:nth-child(3){background-color:#ef5d74;animation-delay:0.3s}
.moving-dot:nth-child(4){background-color:#f9a74b;animation-delay:0.2s}
.moving-dot:nth-child(5){background-color:#60beeb;animation-delay:0.1s}
.moving-dot:nth-child(6){background-color:#fbef5a;animation-delay:0s}
@keyframes loader{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}
</style>
(getButton) #text=(Live Demo) #icon=(link)

Nếu bạn không thích hiệu ứng tải mà mình đã chia sẻ ở trên. Vui lòng tự mình truy cập trang web của nhà cung cấp tải tại icons8.com/cssload

Đó là cách tạo hiệu ứng tải thú vị trên blogspot. Hy vọng nó có thể được áp dụng cho blog của bạn và cảm ơn bạn đã ghé thăm.

Tags
Anh Trai Nắng

Anh Trai Nắng

Không muốn hoặc không thích. Không tồn tại hoặc không thể! facebook twitter youtube instagram external-link

    Hiện thêm

    Đăng nhận xét

    HƯỚNG DẪN BÌNH LUẬN

    0 Nhận xét

    Đăng nhận xét (0)
    Chia sẻ với ứng dụng khác
    Copy Post Link

    HƯỚNG DẪN BÌNH LUẬN

    Chèn link

    Sử dụng công cụ Tạo link

    Chèn hình ảnh

    LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

    Định dạng chữ

    <b>Chữ in đậm</b>
    <i>Chữ in nghiêng</i>
    <u>Chữ gạch chân</u>
    <strike>Chữ gạch ngang</strike>

    Chèn một đoạn Code

    Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
    Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

    Khác

    Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
    Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
    Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
    Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

    Đã hiểu