Top Ad unit 728 × 90

Thêm hiệu ứng loading đẹp khi chuyển trang cho blogger


Demo ngay trên bài viết này. Các bạn thử chuyển hướng đến link khác xem :))

Và để thêm hiệu ứng thú vị này vào blog các bạn vui lòng 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 vào trước thẻ ]]></b:skin> trong template
#stuan-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('http://lh5.googleusercontent.com/-IUnJX0hVrAI/VrnDlK6YRbI/AAAAAAAACec/WFR3ZbHrvWg/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ế  http://lh5.googleusercontent.com/-IUnJX0hVrAI/VrnDlK6YRbI/AAAAAAAACec/WFR3ZbHrvWg/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>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="stuan-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#stuan-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
Lưu lại và xem kết quả. Chúc các bạn thành công
Thêm hiệu ứng loading đẹp khi chuyển trang cho blogger Reviewed by Trương Ngọc Tuấn on 2/13/2016 Rating: 5

5 nhận xét:

  1. :v đậu phộng khi sáng lấy code loading định úp quenen úp , h` star tuấn úp trc :(( hjx hjx

    Trả lờiXóa
  2. Trả lời
    1. Cái này là do mình nén code lại nên bị lỗi bh mh fix rồi các bạn thử chèn lại nhá

      Xóa

✩ Viết tiếng Việt có dấu
✩ Không spam
✩ Không chửi tục, nói bậy
✩ Không quảng cáo thông qua khung Comment.

All Rights Reserved by Star Tuấn Blog © 2015 - 2016
Powered By Blogger, Designed by Star Tuấn | Facebook | Youtube

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.