TỔNG HỢP 8 HIỆU ỨNG LOADING ĐẸP CHO BLOGSPOT

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ẻ ]]>

trong Mẫu ~> Chỉnh Sửa HTML

#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/AVvXsEiAPfxLU6iS2HW79SvPBBDPWWkGz6N2VKBW8Ejb-hAHc2Ltxb4gNWyNVrSnso6AHNjRG-zxTYpkMuKI72s4hru4GM4SoAyTJcC6lbP2WYpvippcIbBMTs8r4_rq10dFT2AkEcVlSSzMx6E/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

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ẻ ]]>

trong Mẫu ~> Chỉnh Sửa HTML

#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/AVvXsEjhT5l9ZW88k1AqEcw56h8DycNBtrRx9BEYmOHSksuXHkxteDWbMFIM1Mxk9Yrwen3BV4Dijm9FHlHWT9wURW6PqpkNqvWy-3gS_pb87cGK2z4xfp6zlWON7zSfQvjX7wGYSoJEzjpwcMYd/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

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ẻ ]]>

trong Mẫu ~> Chỉnh Sửa HTML

#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/AVvXsEgpAWLbFBgwUYdu8JM6He9waIQb1u9oFMu80CZZpGGdllM1iZKLgJAjVj5XXrR_4Q7MSzZmlTlZ1XC8094piGxM6T0aTYd4H0PC7zsy1TbYhe9oPShLEMWUfTNGPTP5u7AzaYi9bdOIv22c/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

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ẻ ]]>

trong Mẫu ~> Chỉnh Sửa HTML


#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

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ẻ ]]>

trong Mẫu ~> Chỉnh Sửa HTML


#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/AVvXsEhaK4VSouFRgf9MpWY1x-pNh_yNZ7JmtXTob9R8RsQb2Dh3v6DdJJNAeyLZd2hvs_IVfRlVcUf5n9_cXPay1D6VMCsum-P-I8hwPdhVeB5cmsHqYxjGknZ29EIUZDMTkWIVjz6BvKiJw1U/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

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ẻ ]]>

trong Mẫu ~> Chỉnh Sửa HTML


#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

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ẻ ]]>

trong Mẫu ~> Chỉnh Sửa HTML


#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 9

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ẻ ]]>

trong Mẫu ~> Chỉnh Sửa HTML


#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/AVvXsEgyjn_2_ABecPr2GS292eoA64yPXrXbX0yrZOjInkUQlTk5CEyKGKaVG9WEujilPHPMo0ezziV5fdMvJzZLv9JtPbdWGJSqhZ_f33Z_fJUW1rhA-EFspqCob9Kuof93abLVY9yV-0vuaQ/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