Thêm Hiệu Ứng Loading ... Đẹp Khi Chuyển Trang Cho Blogger

 

Để thực hiện được một hiệu ứng Loading như vậy rất đơn giản. Bạn chỉ cần làm theo những bước sau là được.

•  B1: Bạn truy cập vào Blogger của mình nhé.
•  B2: Tới phần bố cục và chọn thêm tiện ích HTML/Javascript nhé.
•  B3: Bạn hãy sao chép đoạn Code bên dưới và bỏ vào phần HTML/Javascript vừa thêm nhé. Bây giờ hãy lưu lại và xem Blogger của mình ngay thôi.
• Code:

<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#0C0C0C url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_wZR-okYSYD9wParFitXjoZlOw3nvIo5SM3-tIcZoHBJ1RmxAdZh58Co9Pn9WzvfM4u_A1xv-miIP6L2pC6lglcVR8XSrBf-KjWjWIidjK0sd7J38SnVIZUtMoUxVU-dNgXBZUhIQFVg/s1600/loading.gif?resize=800%2C600') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

* Lưu ý: Bạn có thể thay : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_wZR-okYSYD9wParFitXjoZlOw3nvIo5SM3-tIcZoHBJ1RmxAdZh58Co9Pn9WzvfM4u_A1xv-miIP6L2pC6lglcVR8XSrBf-KjWjWIidjK0sd7J38SnVIZUtMoUxVU-dNgXBZUhIQFVg/s1600/loading.gif thành link ảnh Load trang khác nếu bạn muốn.

Chúc Các Bạn Thành Công :)
- Kul Nguyễn Bình -