Home Code Hay Cho Blogger Tổng Hợp Thủ Thuật Blog Tổng Hợp 8 Hiệu Ứng Loading Đẹp Do mình sưu tầm - AresT

Tổng Hợp 8 Hiệu Ứng Loading Đẹp Do mình sưu tầm - AresT

,

Đánh Giá Bài Vi?t

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
DEMO 1 : 
CSS : 
- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML
12345678910111213141516#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/AVvXsEgHtOWQARuX3ZHugTz2nGCNIaLRP-rzisN0t-Va5OYvDA_hmbUN5TJi83pFkMSLU1fD8nO98dKgt7hnMyBTCeFjbLDGm8jvmXcwIpaS_iTvfXl9L5jDxPg9wRd2bAEga9zP-Ldx386WFwk/s1600/loading.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}

Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>
123456789<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>
DEMO 2 : 


CSS : 
- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML
12345678910111213141516#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/AVvXsEgaKTeFao1DC2yaXioJXZGpFnCrs21EON9un4N7rJUIv4DOh5Ehy8LDYKiAVGtGfAldY_pmuAR-pdt-98BVYKGODosZ53O7oD4W1GPggZfNVx0WE3hB088kLYqkQCiM5e80q45HnR4Ph0mn/s320/tumblr_nln3scL0XO1sjb4o2o1_400.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>
123456789<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>
DEMO 3 : 

CSS :
- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML
12345678910111213141516#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/AVvXsEjpCI3tuvlgLsDVQjo5ptE-a1mFsKDuH-Js7MSaDkp6Nj__iYCHbEpzvVB_7hpIIs9wgG6MQb55Bp0SCNWbYiSCHQn3r2MNPGf1bCqwsVbxGVfT0gFnp_6KC8nUXTo1YB8peuxfs_-YoufG/s1600/loading.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>
123456789<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>
DEMO 4 : 

CSS : 

- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML
12345678910111213141516#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('http://img2.tamtay.vn/files/photo2/2011/8/16/20/1738811/4e4a7660_20f73e52_loading98.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>
123456789<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>
DEMO 5 : 



CSS : 
- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML
12345678910111213141516#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/AVvXsEhDMJX_BPQY6-B-7gRWvpKgce5J4kuVWwoEO85YQHAfnRD1sS3PWYzMxHn94wNaIHWx0-9shmJJbLZMUOA9WWYA0MlN8kwZWfZS6hPmIJR0vLi7X0A_qtqUEnBBg3Ret3m-jx1ZEqyTJCo/s1600/39.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>
123456789<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>
DEMO 6 : 

CSS : 
- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML
12345678910111213141516#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('http://1obpen1mqf5n1nhx8m3r9r40.wpengine.netdna-cdn.com/wp-content/plugins/flickr-album-gallery/img/loading.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>
123456789<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>
DEMO 7 : 

CSS : 
- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML

1234567891011121314151612345678910111213141516#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#0C0C0C
url('http://suafoto.cassiaelleromusical.com.br/public/system/imagens/loading.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>9
123456789<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>
DEMO 8 : 

CSS : 

- Để hiển thị hình ảnh khi load qua một trang mới hay bấm vào 1 topic nào như hình ở trên bạn cầm thêm đoạn code dưới trước thẻ ]]></b:skin> trong Mẫu ~> Chỉnh Sửa HTML


12345678910111213141516#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/AVvXsEhbbwJHq_asrHnVENwBup-Ac1QlHz9QWXXpzmoz_brjNVRhqxhVO55Dwz623Tslcr1OKxXBV5p4BVpw5fmEiRZw_S0tJ9ZDP-MoILTEXuTrUfN6Ztu7V_psdZG6ByvVj0vb_qgp3VN9Xw/s1600/loading.gif')
no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
Javascript :
Thêm đoạn javascript sau vào trước thẻ đóng </body>
123456789<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>

Bên Trên Là Tổng Hợp 8 Demo Loading cho Blogger Khi Chuyển Trang
P/s : Mấy bạn có đi leech thì xin ghi nguồn www.teamloli.com . Xin Chân Thành Cảm ơn ! 

Tổng Hợp 8 Hiệu Ứng Loading Đẹp Do mình sưu tầm - AresT Reviewed by blogspotger on 6/29/2016 Rating: 5

Tags :

- Trong cu?c s?ng lúc nào cung ph?i có lúc vui lúc bu?n, th? m?i là cu?c s?ng

No comments:

Cảm Ơn Bạn Đã Nhận Xét Và Góp Ý !!!

Subscribe to: Post Comments (Atom)
All Rights Reserved by Quỳnh Phương Blog © 2016-2017
Thiết Kế Bìa NTQP52

Biêu Mẫu Liên Hệ

Name

Email *

Message *

Powered by Blogger.
Chat
1