Tạo khung loading giống facebook 99% cho blogspot
/ lúc / 44 bình luận
Hello xin chào tất cả các bạn, chào mừng các bạn đã quay lại với Star Dũng Blog.
Theo như nhu cầu của các bạn hôm nay mình sẽ đăng bài mới. Mình sẽ hướng dẫn các bạn tạo Khung loading giống facebook 99% cho blogspot.Bắt đầu nhé!
Ảnh minh họa
DEMO

Các bước thực hiện

Bước 1: Truy cập chỉnh sửa HTML của blogger.
Bước 2: Chèn CSS này trước ]]></b:skin>
#Blog1{position:relative}
.bsw_nf_loading_{width:100%;min-height:230px;background:#FFF;margin:10px auto 0;padding:10px;border:1px solid #ddd;clear:both;box-sizing:border-box}
.loading_effect_nf_bsw{-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:loadingAnimation;-webkit-animation-timing-function:linear;background:#f6f7f8;background-image:-webkit-linear-gradient(left,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);background-image:linear-gradient(left,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100%);background-repeat:no-repeat;background-size:200% auto;height:100px;position:relative;overflow:hidden}
.bsw_nf_loading{background:#FFF;position:absolute;display:block;height:10px}
.load-1{height:35px;width:10px;top:0;left:40px}
.load-2{width:450px;height:5px;top:0;left:50px}
.load-3{width:450px;height:5px;top:15px;left:50px}
.load-4{width:450px;height:10px;top:5px;left:180px}
.load-5{width:450px;height:10px;top:20px;left:120px}
.load-6{width:450px;height:5px;top:30px;left:40px}
.load-7{width:100%;height:10px;top:35px;left:40px}
.load-8{width:100%;height:10px;top:40px;left:0}
.load-9{width:100%;height:10px;top:50px;left:250px}
.load-10{width:100%;height:10px;top:70px;left:300px}
.load-11{width:100%;height:10px;top:90px;left:180px}
.load-12{width:100%;height:10px;top:60px;left:0}
.load-13{width:100%;height:10px;top:80px;left:0}
@-webkit-keyframes loadingAnimation{0%{background-position:150% 0}100%{background-position:-150% 0}}
..demo_btn_bacsiwindows{background:#4267b2;color:#fff!important;padding:10px;display:inline-block;margin:10px 0;width:180px;font:500 15px Roboto;text-transform:uppercase;border-radius:4px;text-decoration:none!important}
..demo_btn_bacsiwindows:hover{opacity:.9;box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19)}
.demo_btn_bacsiwindows{border:2px solid;overflow:hidden;position:relative;padding:10px;display:inline-block;width:200px;text-align:center;text-decoration:none!important;text-transform:uppercase;border-radius:100px;font:500 15px Roboto;margin:10px 0}
.demo_btn_bacsiwindows:hover{letter-spacing:1px}
.demo_btn_bacsiwindows:after{opacity:.4;background:#4267b2;content:"";height:155px;left:-75px;opacity:2;position:absolute;top:-50px;transform:rotate(35deg);transition:all 1s cubic-bezier(0.19,1,0.22,1);width:100px;z-index:100}
.demo_btn_bacsiwindows:hover:after{opacity:1;left:120%;-webkit-transition:all 1s cubic-bezier(0.19,1,0.22,1);transition:all 1s cubic-bezier(0.19,1,0.22,1)}
Bước 3: Chèn đoạn HTML dưới đây vào nơi mà bạn muốn hiển thị.
<div class='bsw_nf_loading_ load-more'>
<div class='loading_effect_nf_bsw'>
<div class='bsw_nf_loading load-1'></div>
<div class='bsw_nf_loading load-2'></div>
<div class='bsw_nf_loading load-3'></div>
<div class='bsw_nf_loading load-4'></div>
<div class='bsw_nf_loading load-5'></div>
<div class='bsw_nf_loading load-6'></div>
<div class='bsw_nf_loading load-7'></div>
<div class='bsw_nf_loading load-8'></div>
<div class='bsw_nf_loading load-9'></div>
<div class='bsw_nf_loading load-10'></div>
<div class='bsw_nf_loading load-11'></div>
<div class='bsw_nf_loading load-12'></div>
<div class='bsw_nf_loading load-13'></div>
</div></div>
Bước 5: Lưu mẫu.

Lời kết

Ok vậy là đã xong một widget nhỏ. Widget được làm hoàn toàn bằng CSS và HTML nên sẽ không ảnh hưởng gì đến tốc độ cũng như cấu trúc theme hết nhé.
Bài viết thuộc bản quyền của Star Dũng Blog. Nếu copy hoặc sử dụng lại vui lòng ghi rõ nguồn bài viết gốc.
Chúc các bạn thành công.
Code by: Bác Sĩ Windows

HIỆN ĐANG CÓ 44 BÌNH LUẬN

avatar
Trường Nguyễn

Từ linh hồn đến thể xác, đâu đâu cũng thấy Bác Sĩ Windows....

TRẢ LỜI
avatar
Nguyễn Ngọc Quí Đz

:3

TRẢ LỜI

Cạn lời rồi :v

TRẢ LỜI
avatar
๖ۣۜTan ๖ۣۜDuy

Hê lô :D
Buổi trưa vv ♡

TRẢ LỜI

Cảm ơn! Buổi trưa vui vẻ :)

TRẢ LỜI

Hay đó! Qua tt nha!

TRẢ LỜI

Test luôn đi bác, TTT

TRẢ LỜI

Test luôn đi anh :)

TRẢ LỜI

Hay đó! Qua tt nha!

TRẢ LỜI

Cảm ơn ạ :) Test luôn đi bác :D

TRẢ LỜI

đẹp quá,...

TRẢ LỜI
avatar
Nguyễn Ngọc Quí Đz

hay đấy man

TRẢ LỜI

Cảm ơn bác :) test luôn đi bác!

TRẢ LỜI

Cảm ơn ạ, test luôn đi bác:V

TRẢ LỜI
avatar
Nguyên Hồ Hữu

Hay đó anh

TRẢ LỜI
avatar
Nguyễn Quang Huy

Rất hay và hữu ích nha anh >)

TRẢ LỜI

Happy New Year

TRẢ LỜI

hép pi niu diaaaaa

TRẢ LỜI
avatar
Nguyễn Ngọc Quí Đz

Happy New Year 2018 (bận đi làm chúc trễ thông cảm)

TRẢ LỜI
avatar
Star Dũng Blog

Cảm ơn em ^_^

TRẢ LỜI
avatar
Star Dũng Blog

Cảm ơn em nhiu ^^

TRẢ LỜI
avatar
Star Dũng Blog

Happy New Year
Xin lỗi hôm nay là mùng hai rồi lời chúc muộn quá :(

TRẢ LỜI
avatar
Star Dũng Blog

Chúc mừng năm mới, em xin lỗi em chúc muộn quá :(

TRẢ LỜI
avatar
Nguyễn Ngọc Quí Đz

ra bài mới đi

TRẢ LỜI
avatar
Star Dũng Blog

Chúc mừng năm mới, xin lỗi bác em chúc muộn quá :( (2/1/2018) :v

TRẢ LỜI
avatar
Star Dũng Blog

Đang nghĩ ý tưởng bác :)

TRẢ LỜI

Hay quá :v

TRẢ LỜI
avatar
Star Dũng Blog

Cảm ơn anh :) Test lun đi anh :>

TRẢ LỜI

Hay đấy em

TRẢ LỜI
avatar
Star Dũng Blog

Cảm ơn anh :)

TRẢ LỜI

Đũng gỡ liên kết của mình nhé! Chúc Blog bạn ngày càng phát triển nhé :D

TRẢ LỜI
avatar
Star Dũng Blog

Sao vậy Bác :( :/

TRẢ LỜI
avatar
Star Dũng Blog

Vãi cả TROLL :(

TRẢ LỜI
avatar
Trần Thanh Bình

https://codepen.io/Mestika/pen/ByNYBa?q=facebook&limit=all&type=type-pens

TRẢ LỜI
avatar
Phan Văn Dũng

Văn Dũng IT qua TT này :)
Blog tui hay đăng bài nên thường qua blog TTT nha!

TRẢ LỜI
avatar
Star Dũng Blog

TTT nha man

TRẢ LỜI
avatar
Hưng Star - IT

ra bài mới nào

TRẢ LỜI
avatar
Star Dũng Blog

Hóng đi man :)

TRẢ LỜI

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.