Trang chủ » Thủ thuật Blogspot » Thêm hiệu ứng tải trang đẹp và nhẹ cho Blogsot

  • Thêm hiệu ứng tải trang đẹp và nhẹ cho Blogsot

    Bởi | Lúc | Trong
    Có Comment

    HƯỚNG DẪN

    Bước 1: Đăng nhập Blogger => Mẫu => Chỉnh sửa HTML


      Bước 2: Tìm đến thẻ <body> và chèn đoạn css sau vào dưới nó
    
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='loader'>
<div class='thinhndthinhndballs'></div>
<div class='thinhndthinhndballs'></div>
<div class='thinhndthinhndballs'></div>
<div class='thinhndthinhndballs'></div>
</div>
<script type='text/javascript'>
$(window).load(function(){setTimeout(function(){$(".thinhndthinhndballs").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}
.thinhndthinhndballs{width:30px;height:30px;position:absolute;background-color:#ccc;top:45%;border-radius:50%}
.thinhndthinhndballs:nth-child(1){background-color:#D8334A;animation:move 2s infinite cubic-bezier(.2,.64,.81,.23)}
.thinhndthinhndballs:nth-child(2){background-color:#4A89DC;animation:move 2s 150ms infinite cubic-bezier(.2,.64,.81,.23)}
.thinhndthinhndballs:nth-child(3){background-color:#FC6E51;animation:move 2s 300ms infinite cubic-bezier(.2,.64,.81,.23)}
.thinhndthinhndballs: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='thinhndball'></div>
<div class='thinhndball'></div>
<div class='thinhndball'></div>
<div class='thinhndball'></div>
<div class='thinhndball'></div>
<div class='thinhndball'></div>
<div class='thinhndball'></div>
</div>
</div>
<script type='text/javascript'>
$(window).load(function(){setTimeout(function(){$(".thinhndthinhndballs").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}
.thinhndball{width:10px;height:10px;margin:10px auto;border-radius:50px}
.thinhndball: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}
.thinhndball: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}
.thinhndball: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}
.thinhndball: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}
.thinhndball: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}
.thinhndball: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}
.thinhndball: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 và kiểm tra!
    Chúc bạn thành công! Xin cảm ơn  vì đã quan tâm theo dõi

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

    Đăng nhận xét

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