Home / Hiệu ứng tải trang / Thủ thuật Blogger / Hiệu ứng tải trang cực đẹp cho Blogspot

Hiệu ứng tải trang cực đẹp cho Blogspot

Chào bạn, đây là bài đăng thứ 3 trên blog Thịnh ND mà mình mới làm lại và lần này, mình xin chia sẻ hiệu ứng tải trang cực đẹp bằng CSS. Hiệu ứng này đã được rất nhiều blog sử dụng như: Giang Blogger,Bblog,...


HƯỚNG DẪN

Bước 1: Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Chèn đoạn code sau vào dưới thẻ <body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='loader'>
<div class='thinhndload'></div>
<div class='thinhndload'></div>
<div class='thinhndload'></div>
<div class='thinhndload'></div>
</div>
<script type='text/javascript'>
$(window).load(function(){setTimeout(function(){$(".thinhndload").fadeOut("slow");setTimeout(function(){$("#loader").fadeOut("slow")},200)},200)});
</script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#333;z-index:999999}
.thinhndload{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}
.thinhndload:nth-child(1){background-color:#D8334A;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}
.thinhndload:nth-child(2){background-color:#4A89DC;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}
.thinhndload:nth-child(3){background-color:#FC6E51;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}
.thinhndload:nth-child(4){background-color:#2ECC71;animation:move 2s 450ms infinite cubic-bezier(.2,.64,.81,.23)}@keyframes move{0%{left:0%}100%{left:100%}}</style>
</b:if> 
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div id='loader'>
<div class='icontainer'>
<div class='thinhndloads'></div>
<div class='thinhndloads'></div>
<div class='thinhndloads'></div>
<div class='thinhndloads'></div>
<div class='thinhndloads'></div>
<div class='thinhndloads'></div>
<div class='thinhndloads'></div>
</div>
</div>
<script type='text/javascript'>
$(window).load(function(){setTimeout(function(){$(".thinhndload").fadeOut("slow");setTimeout(function(){$("#loader").fadeOut("slow")},100)},100)});
</script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:#333;z-index:999999}
.icontainer{width:200px;height:100px;padding-top:180px;margin:0 auto}
.thinhndloads{width:10px;height:10px;margin:10px auto;border-radius:50px}
.thinhndloads:nth-child(1){background:#ff005d;-webkit-animation:right 1s infinite ease-in-out;-moz-animation:right 1s infinite ease-in-out;animation:right 1s infinite ease-in-out}
.thinhndloads:nth-child(2){background:#35ff99;-webkit-animation:left 1.1s infinite ease-in-out;-moz-animation:left 1.1s infinite ease-in-out;animation:left 1.1s infinite ease-in-out}
.thinhndloads:nth-child(3){background:#008597;-webkit-animation:right 1.05s infinite ease-in-out;-moz-animation:right 1.05s infinite ease-in-out;animation:right 1.05s infinite ease-in-out}
.thinhndloads:nth-child(4){background:#ffcc00;-webkit-animation:left 1.15s infinite ease-in-out;-moz-animation:left 1.15s infinite ease-in-out;animation:left 1.15s infinite ease-in-out}
.thinhndloads:nth-child(5){background:#2d3443;-webkit-animation:right 1.1s infinite ease-in-out;-moz-animation:right 1.1s infinite ease-in-out;animation:right 1.1s infinite ease-in-out}
.thinhndloads:nth-child(6){background:#ff7c35;-webkit-animation:left 1.05s infinite ease-in-out;-moz-animation:left 1.05s infinite ease-in-out;animation:left 1.05s infinite ease-in-out}
.thinhndloads:nth-child(7){background:#4d407c;-webkit-animation:right 1s infinite ease-in-out;-moz-animation:right 1s infinite ease-in-out;animation:right 1s infinite ease-in-out}
@-webkit-keyframes right{0%{-webkit-transform:translate(-15px)}50%{-webkit-transform:translate(15px)}100%{-webkit-transform:translate(-15px)}}
@-webkit-keyframes left{0%{-webkit-transform:translate(15px)}50%{-webkit-transform:translate(-15px)}100%{-webkit-transform:translate(15px)}}
@-moz-keyframes right{0%{-moz-transform:translate(-15px)}50%{-moz-transform:translate(15px)}100%{-moz-transform:translate(-15px)}}
@-moz-keyframes left{0%{-moz-transform:translate(15px)}50%{-moz-transform:translate(-15px)}100%{-moz-transform:translate(15px)}}
@keyframes right{0%{transform:translate(-15px)}50%{transform:translate(15px)}100%{transform:translate(-15px)}}
@keyframes left{0%{transform:translate(15px)}50%{transform:translate(-15px)}100%{transform:translate(15px)}}</style>
</b:if>
Bước 3: Lưu mẫu
Chúc bạn thành công! Xin cảm ơn

3 nhận xét

Đăng ký: Đăng Nhận xét (Atom)