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.
Hướng dẫn
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 !
Điểm 4.6/5 dựa vào 87 đánh giá
EmoticonEmoticon