• Giới thiệu
  • Liên hệ
  • Điều khoản
  • Bảo mật
Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
Tin Tức Tổng Hợp
No Result
View All Result

Tạo hiệu ứng loading đẹp cho blogspot

admin by admin
Tháng Chín 19, 2021
Home Blogspot

Hướng dẫn các bạn thêm Tạo hiệu ứng loading đẹp cho blogspot. Với hiệu ứng Preloader này bạn có thể chèn thêm đoạn text phía dưới như hình trên. Nhìn rất là chuyên nghiệp tạo điểm nhấn cho khách hàng, độc giả ngay đầu tiên khi truy cập trang web của bạn.

Tạo hiệu ứng loading đẹp cho blogspot
Tạo hiệu ứng loading đẹp cho blogspot

Nội dung

  • Tạo hiệu ứng loading đẹp cho blogspot
  • Kết luận
    • Bài viết liên quan:

Tạo hiệu ứng loading đẹp cho blogspot

Các bước cài đặt như sau:

Bước 1: Thêm CSS trước thẻ đóng </b:skin>

.text-center{text-align:center!important}

.item-col{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}

.row-item-col{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}

.ctn-preloader{-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:none;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;left:0;top:0;width:100%;z-index:9000}

.ctn-preloader .animation-preloader{position:absolute;z-index:1000}

.ctn-preloader .animation-preloader .spinner{-webkit-animation:spinner 1s infinite linear;animation:spinner 1s infinite linear;border-radius:50%;border:3px solid rgba(0,0,0,0.2);border-top-color:#000000;height:9em;margin:0 auto 3.5em auto;width:9em}

.ctn-preloader .animation-preloader .txt-loading{font:bold 5em "Poppins",sans-serif;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

.ctn-preloader .animation-preloader .txt-loading .letters-loading{color:rgba(0,0,0,0.2);position:relative}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:before{-webkit-animation:letters-loading 4s infinite;animation:letters-loading 4s infinite;color:#000000;content:attr(data-text-preloader);left:0;opacity:0;font-family:"Poppins",sans-serif;position:absolute;top:-3px;-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg)}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before{-webkit-animation-delay:0.2s;animation-delay:0.2s}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before{-webkit-animation-delay:0.4s;animation-delay:0.4s}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before{-webkit-animation-delay:0.6s;animation-delay:0.6s}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before{-webkit-animation-delay:0.8s;animation-delay:0.8s}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before{-webkit-animation-delay:1s;animation-delay:1s}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before{-webkit-animation-delay:1.2s;animation-delay:1.2s}

.ctn-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before{-webkit-animation-delay:1.4s;animation-delay:1.4s}

.ctn-preloader.dark .animation-preloader .spinner{border-color:rgba(255,255,255,0.2);border-top-color:#fff}

.ctn-preloader.dark .animation-preloader .txt-loading .letters-loading{color:rgba(255,255,255,0.2)}

.ctn-preloader.dark .animation-preloader .txt-loading .letters-loading:before{color:#fff}

.ctn-preloader p{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:8px;color:#3b3b3b}

.ctn-preloader .loader-preloader{position:fixed;top:0;left:0;width:100%;height:100%;font-size:0;z-index:1;pointer-events:none}

.ctn-preloader .loader-preloader .row-item-col{height:100%}

.ctn-preloader .loader-preloader .loader-section{padding:0}

.ctn-preloader .loader-preloader .loader-section .bg{background-color:#ffffff;height:100%;left:0;width:100%;-webkit-transition:all 800ms cubic-bezier(0.77,0,0.175,1);-o-transition:all 800ms cubic-bezier(0.77,0,0.175,1);transition:all 800ms cubic-bezier(0.77,0,0.175,1)}

.ctn-preloader .loader-preloader.dark_bg .loader-section .bg{background:#111339}

.ctn-preloader.loaded .animation-preloader{opacity:0;-webkit-transition:0.3s ease-out;-o-transition:0.3s ease-out;transition:0.3s ease-out}

.ctn-preloader.loaded .loader-section .bg{width:0;-webkit-transition:0.7s 0.3s allcubic-bezier(0.1,0.1,0.1,1);-o-transition:0.7s 0.3s allcubic-bezier(0.1,0.1,0.1,1);transition:0.7s 0.3s allcubic-bezier(0.1,0.1,0.1,1)}

@-webkit-keyframes spinner{to{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}

@keyframes spinner{to{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}

@-webkit-keyframes letters-loading{0%,75%,100%{opacity:0;-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg)}25%,50%{opacity:1;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}

@keyframes letters-loading{0%,75%,100%{opacity:0;-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg)}25%,50%{opacity:1;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}}

@media screen and (max-width:767px){.ctn-preloader .animation-preloader .spinner{height:8em;width:8em}.ctn-preloader .animation-preloader .txt-loading{font:bold 3.5em "Poppins",sans-serif}}

@media screen and (max-width:500px){.ctn-preloader .animation-preloader .spinner{height:7em;width:7em}.ctn-preloader .animation-preloader .txt-loading{font:bold 2em "Poppins",sans-serif}}

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

<div id='preloader'>

<div class='ctn-preloader' id='ctn-preloader'>

<div class='animation-preloader'>

<div class='spinner'></div>

<div class='txt-loading'>

<span class='letters-loading' data-text-preloader='G'> G </span>

<span class='letters-loading' data-text-preloader='I'> I </span>

<span class='letters-loading' data-text-preloader='A'> A </span>

<span class='letters-loading' data-text-preloader='O'> O </span>

<span class='letters-loading' data-text-preloader='D'> D </span>

<span class='letters-loading' data-text-preloader='I'> I </span>

<span class='letters-loading' data-text-preloader='E'> E </span>

<span class='letters-loading' data-text-preloader='N'> N </span>

<span class='letters-loading' data-text-preloader='.'> . </span>

<span class='letters-loading' data-text-preloader='B'> B </span>

<span class='letters-loading' data-text-preloader='L'> L </span>

<span class='letters-loading' data-text-preloader='O'> O </span>

<span class='letters-loading' data-text-preloader='G'> G </span>

</div>

<p class='text-center'>Loading</p>

</div>

<div class='loader-preloader'>

<div class='row-item-col'>

<div class='item-col loader-section section-left'>

<div class='bg'></div>

</div>

<div class='item-col loader-section section-left'>

<div class='bg'></div>

</div>

<div class='item-col loader-section section-right'>

<div class='bg'></div>

</div>

<div class='item-col loader-section section-right'>

<div class='bg'></div>

</div>

</div>

</div>

</div>

</div>

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

<script>

//<![CDATA[

$(window).on('load', function() {

$('#ctn-preloader').addClass('loaded');

if ($('#ctn-preloader').hasClass('loaded')) {

$('#preloader').delay(900).queue(function() {

$(this).remove();

});

}

});

//]]>

</script>

Kết luận

Chỉ vài bước đơn giản là bạn có thể Tạo hiệu ứng loading đẹp cho blogsptot rồi. Nếu có gì thắc mắc các bạn để lại dưới phần bình luận nhé. Chúc các bạn thành công!

Đánh giá bài viết
[Total: 3 Average: 5]

Bài viết liên quan:

  1. Chia Sẻ Bộ Social Icons Tuyệt Đẹp Cho Blogspot
  2. Tạo trang chuyển hướng liên kết ngoài cho blogspot
  3. Cách xóa ngày khỏi URL bài đăng trên Blogger
  4. Hướng dẫn thêm Google Analytics vào Blogger 2022
  5. How to Add Font Awesome Social Icons in Blogger
Tags: Tạo hiệu ứng loading đẹp cho blogspot
admin

admin

Next Post
Cách xóa ngày khỏi URL bài đăng trên Blogger

Cách xóa ngày khỏi URL bài đăng trên Blogger

Thêm Tiện ích Zalo gọi điện cho blogspot

Thêm Tiện ích Zalo gọi điện cho blogspot

Hướng dẫn thêm Nút gọn điện cho blogspot

Hướng dẫn thêm Nút gọi điện cho blogspot

Login
guest
guest
0 Góp ý
Inline Feedbacks
Xem tất cả các bình luận

TUT Lên Tích Xanh Facebook Miễn Phí 2023

Điều kiện để Messi có thể tham dự World Cup 2026

Khắc phục lỗi Client hết trận đấu trường chân lý

Ân sủng là gì? Sự ân sủng là gì?

Misoa là ai? Nữ MC lên tiếng “bị bạn trai tác động vật lý”

DQ là số điện thoại của ai? Vì sao gọi cho bạn?

  • Viết BLog
    • Giới thiệu
    • Liên hệ
    • Điều khoản
    • Bảo mật

    © 2021 Đoàn Hải Blog

    No Result
    View All Result
    • Home
    • Designer
      • PHOTOSHOP
        • Tutorial
        • Download
      • ILLUSTRATOR
        • Tutorial
        • Download
      • LIGHTROOM
        • Tutorial
        • Download
      • PHOTOGRAPHY
    • Blogspot
      • Template Blogspot
      • Thủ Thuật Blogspot
    • WordPress
      • Plugin WordPress
      • Theme WordPress
      • Thủ Thuật WordPress
    • Thủ Thuật
      • Công Nghệ
      • Web
      • Windows
    • Tài Liệu
      • Lập Trình
      • Khóa học
      • Phần mềm
      • Tiktok
    • GAME
      • Game Offline
      • Game Online

    © 2021 Đoàn Hải Blog

    wpDiscuz
    0
    0
    Rất thích suy nghĩ của bạn, hãy bình luậnx
    ()
    x
    | Reply