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

AresT Mạnh Tuấn   Wednesday, June 29, 2016   Code Hay Cho Blogger , PHP-HTML , Tổng Hợp Thủ Thuật Blog   0  

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('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;
}

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('http://1.bp.blogspot.com/-CGk7LAKUhtU/VfrL5VyzJPI/AAAAAAAAMvQ/98WGzf--JME/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('http://1.bp.blogspot.com/-eWDJbNfMBhQ/UhyHtoecLBI/AAAAAAAAMK0/QyGNoqZZrZ0/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('http://4.bp.blogspot.com/-3dw28kc3jFw/UzbU_aLNvPI/AAAAAAAABP8/hB9_z1mPrHM/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://2.bp.blogspot.com/-wJhl_SeZ4OM/V1BOuvkE30I/AAAAAAAAB_Y/0Sgg90v-2h0WCcMKJlHzaV9oC4mzza5AgCLcB/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 ! 

Share Share Share

Code Hay Cho Blogger PHP-HTML Tổng Hợp Thủ Thuật Blog

Administrator: Hoàng Mạnh Tuấn

Không điều gì là tồn tại mãi mãi cho đến lúc bạn ngừng cố gắng! Một cậu học sinh trung học luôn có ước mơ và hoài bão...Bạn hãy làm những việc bình thường bằng lòng say mê phi thường, thành công sẽ đến với bạn!!

CÓ THỂ BẠN SẼ THÍCH

Đang tải...