Hướng dẫn làm hiệu ứng loading chuyên nghiệp cho blogspot

Hello xin chào anh em :P, Xì Ta Nhân đã comeback blog đây :3 và còn mang theo một số thủ thuật và code có ích mà mình đã rip từ các website nước ngoài, hôm nay mình sẽ chia sẻ code loading chuyên nghiệp trên nền tảng blogspot.

Hướng dẫn cách làm

Anh em cho toàn bộ code bên dưới vào sau thẻ <body>
<style>
#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}#loader-wrapper .loader-section{position:fixed;top:0;width:51%;height:100%;background:#eceff1;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}#loader-wrapper .loader-section.section-left{left:0}#loader-wrapper .loader-section.section-right{right:0}#loader{display:block;position:relative;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;z-index:1001}#loader:before{content:&quot;&quot;;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}#loader:after{content:&quot;&quot;;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)}}.loaded #loader-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all 0.3s 1s ease-out;transition:all 0.3s 1s ease-out}.loaded #loader-wrapper .loader-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.loaded #loader-wrapper .loader-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);transition:all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)}.loaded #loader{opacity:0;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}.progress{background-color:rgba(255,64,129,0.22)}</style>
<div id='loader-wrapper'><div id='loader'/><div class='loader-section section-left'/><div class='loader-section section-right'/></div>
<script type='text/javascript'>
// Effect
$(function() {
    var ink, d, x, y;
    $(".ripple").click(function(e) {
        if ($(this).find(".ink").length === 0) {
            $(this).prepend("<span class='ink'></span>");
        }
        ink = $(this).find(".ink");
        ink.removeClass("animate");
        if (!ink.height() && !ink.width()) {
            d = Math.max($(this).outerWidth(), $(this).outerHeight());
            ink.css({
                height: d,
                width: d
            });
        }
        x = e.pageX - $(this).offset().left - ink.width() / 2;
        y = e.pageY - $(this).offset().top - ink.height() / 2;
        ink.css({
            top: y + 'px',
            left: x + 'px'
        }).addClass("animate");
    });
});
// Smooth Images
$(".post-author img").each(function(){$(this).attr("src",$(this).attr("src").replace(/\/s[0-9]+(\-c)?\//,"/s50-c/"))});
$(".tanggalx img").each(function(){$(this).attr("src",$(this).attr("src").replace(/\/s[0-9]+(\-c)?\//,"/s40-c/"))});
// Loader
$(window).bind("load",function(){$("#loader-wrapper").fadeOut(1e3)});
//]]>
</script>
Lưu lại và tận hưởng
Mình xin share bộ theme mà mình rip ( phần 1 ) đây là 1/3 trong số theme của mình.

Nhận xét

  1. Wtf, bài tổng hợp temp đây rồi??

    Trả lờiXóa
  2. Là con người chứ đéo phải con vật nhé :))))

    Trả lờiXóa
  3. Template rip cơ à : ))) Lấy temp share về tự nhận mình rip = ))) cái thể loại lol gì thế này

    Trả lờiXóa
    Trả lời
    1. :))) Đâu ạ ? xin cái nguồn ?

      Xóa
    2. :)) vào folder xem lại đi pro

      Xóa
    3. :3 một vài rip, một vài share chứ không phải tất cả nhé

      Xóa
  4. Đm temp blogger của Sơn à

    Trả lờiXóa
    Trả lời
    1. Temp blogger của Sơn ?

      Xóa
    2. Chưa test, nhưng mà cái temp tên theme blogger là vủa me à

      Xóa
  5. Cái Phần Loading Này Của Tôi Mà Ông .

    Trả lờiXóa
    Trả lời
    1. :3 Đây là loading của temp bên ID Blanter nhé

      Xóa

Đăng nhận xét

Bình luận sao cho dễ thương xíu nhé :3