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/AVvXsEib_bLCL12HE0MxT_XRuObvnOrmZS1Mk2dpgIxp5hKSuMX3TwT8efkeHqb8g7NMm_bvIHjCCxds9Aw80l7U01-P41vXMV_UhHPoE_mLAoQv22fxROSIoWpX7Hlhco4dfnKweZtHDtZB_B0/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/AVvXsEgri5GTHovS9w9o3iqVjuPJMA3Y98cgz05HqqD5E0qdMf7d94QVHOLOq2d8s97g2064J7d4niQp0vm1dsuKFSgN-Yyiqy2zIJc6-qj4jT865fJToTjOmDKAPGV9KEBWmAUsuZuBSMHwCqgJ/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/AVvXsEhwVqgJsKQszK3QlhWLd6od-t14b9P3g8BaLBJTKkHXIoKes53KFD-dZmt9CBPbmgBdePND7Z_hmxzji7A_x79xi8kqxjZCG8ZLbiqIFicG9-oC7R-6Pjo5qW6R4w4amoNw762Vq3YB9opR/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/AVvXsEhFAC0-S5PKCxZW9Jn5-xUDQcq2NffQYs2ATdFeYgfPOIBi6kLexYY1e9jqysVct5ZsWQ32yV2NlynMOTHqkMt9MOGo82f14l2jv1lCCa0avHQEbcciZuPVnh0fQ0tA6llkvYmK1kzuRLA/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/AVvXsEhwI3gCeiHektYjcHkMX9uR2a85_dOZI4cpwJG2nn-8864fQKrF0qtHEl6cK4FtFsElcpJtEh-nxlhLCf6cQYcwMOx9aH9yWU5aBQuXoE7hqyvMg9FZqxcoYTKsRnL5f051Blp6QaalSA/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

Bên Trên Là Tổng Hợp 8 Demo Loading cho Blogger Khi Chuyển Trang
nguồn www.teamloli.com

tháng 7 27, 2016