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

Và để them hiệu ứng thú vị này vào blog thì các bạn vui long làm theo các bước hướng dẫn đơn giản bên dưới CSS

Để hiển thị hình ảnh khi load trang như ở trên bạn thêm code sau trước thẻ  ]]></b:skin> trong template

#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/AVvXsEil3z82_A6IuVBKa2VMVVKW27K5-yTZAE7wHYMcL5ZPLRThMi0NyuB4liUhxNB1xMjlPXgx0GCVXqE_lj0iAzlbtBi24WG8iOlytz6oy3wJhScrRaSkQQk1e8sscgdt8sHkuYkdeezNjoQ/s1600/loading.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}

Bạn có thể thay thế
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil3z82_A6IuVBKa2VMVVKW27K5-yTZAE7wHYMcL5ZPLRThMi0NyuB4liUhxNB1xMjlPXgx0GCVXqE_lj0iAzlbtBi24WG8iOlytz6oy3wJhScrRaSkQQk1e8sscgdt8sHkuYkdeezNjoQ/s1600/loading.gif thành link ảnh muốn hiện khi chuyển trang

Script

Chèn đoạn code bên dưới trước thẻ đóng </body>

#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/AVvXsEil3z82_A6IuVBKa2VMVVKW27K5-yTZAE7wHYMcL5ZPLRThMi0NyuB4liUhxNB1xMjlPXgx0GCVXqE_lj0iAzlbtBi24WG8iOlytz6oy3wJhScrRaSkQQk1e8sscgdt8sHkuYkdeezNjoQ/s1600/loading.gif ') no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em;

<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 lại và xem kết quả. Chúc bạn thành công!

Author : Unknown

Share this

Related Posts