Banner 1

Tạo hiệu ứng tải trang với CSS cho blogspot

Mình thấy bên trang blog của bác Thinhnd cũ có rất nhiều thủ thuật blog hay. Do đã nghỉ nên mình sẽ chia sẻ lại bài viết cho các bạn biết thêm về thủ thuật blogspot.
[post_ad] Tạo hiệu ứng tải trang với CSS cho blogspot.
Tạo hiệu ứng tải trang với CSS cho blogspot
Cách làm:
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 lại là xong. Chúc bạn thành công !
Tạo hiệu ứng tải trang với CSS cho blogspot Tạo hiệu ứng tải trang với CSS cho blogspot Xét bởi Trường Quang on 8/15/2016 Xếp hạng: 5

Không có nhận xét nào:

# HƯỚNG DẪN NHẬN XÉT
Chú ý: Bạn phải đăng nhập tài khoản Google mới có thể bình luận.
_Cấm spam link dưới mọi hình thức
_Các liên kết sử dụng cú pháp: <a href='#'>Text hiển thị</a>
_Thay dấu # thành đường dẫn mà bạn muốn link tới.