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>
9123456789<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 !