Home Thủ Thuật Blogger 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

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 blog.
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>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849<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 !