Hiệu ứng loading đẹp trên đầu blogspot

Nếu mấy hôm nay các bạn truy cập vào trang youtube sẽ thấy trang đó có một hiệu ứng loadding cực lạ đó là thanh loading chạy ngang ngay trên đầu của trang đó. Bài viết này mình sẽ hướng dẫn các bạn thêm hiệu ứng loadding đó vào blog của các bạn.

Các bạn chỉ cần làm theo một số bước đơn giản bên dưới.

» Thêm hiệu ứng loadding chỵ ngang giống trang youtube cho blogspot.

1- Đăng nhập vào Blog => chọnmẫu » Chọn chỉnh sửa HTML
2- Dán đoạn code bên dưới vào trước thẻ đóng </head> trong blog của bạn.

<style>
    #namkna-loading{
        position: fixed;
        z-index: 50;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDHiwpNN2GJDe0wkqWlNVXGODnhYBOBbOJ1_o3Sgfaylx68QtWruZbL6KW2NkPzmjM1ZwjUjzKjWv4d2coY6h78vl42IyfDLAAVqxmAq97pwoj9oQTDGgXluQ3OnJrU-dz9ibngOkkIll/s1600/Loadding-author-namkna.gif) no-repeat center;
        line-height: 350px;
        text-align: center;
        font-size: 36px;
        color: #353231;
        text-indent: -9999px;
    }
    .NAMKNA#namkna-loading{ display: none; }
    @media only screen and (device-width: 768px) {
        #loading {
            position:absolute;
            width:1040px;
            min-height:768px;
        }
    }
    #namkna-progress-bar{
        position: absolute;
        top: 0; left: 0;
        background: #de1301;
        opacity: 0.8;
        width: 0;
        height: 18px;
    }
    #namkna-loader{
        height: 100%;
        display: none;
    }
    </style>
    <script>
    (function($){
    $("html").removeClass("NAMKNA");

    $("#header").ready(function(){ $("#namkna-progress-bar").stop().animate({ width: "25%" },1500) });
    $("#footer").ready(function(){ $("#namkna-progress-bar").stop().animate({ width: "75%" },1500) });

    $(window).load(function(){
        $("#namkna-progress-bar").stop().animate({ width: "100%" },600,function(){
            $("#namkna-loading").fadeOut("fast",function(){ $(this).remove(); });
        });
    });
    })(jQuery);
    </script>

3- Thêm vào sau thẻ </body> đoạn code bên dưới:

<div id='namkna-loading'><div id='namkna-progress-bar'></div><div id='namkna-loader'>Loading...</div></div> 

- Công việc tiếp theo của bạn là lưu mẫu lại và xem thành quả của bạn nha

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait