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.
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
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 !
BÌNH LUẬN (0)
Viết bình luận
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ình luận một đoạn code, hãy mã hóa code trước nhé!