Code này phù hợp cho PC và cũng tương thích với Mobile đảm bảo không ảnh hưởng gì tới trải nghiệm người dùng.
DEMO
Điều kiện để code này hoạt động là:
- Blogspot cần có thư viện jquery
Cài đặt code trang trí tết Kỷ Hợi 2019 cho blogspot
- Cách thực hiện thì đơn giản bạn chỉ việc thêm đoạn code sau vào trước thẻ </body> hoặc là thêm một tiện ích HTML/javascript<style> #loading-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000} #loading{display:block;position:relative;left:50%;top:50%;width:225px;height:225px;background:none;z-index:1002;margin:-112.5px 0 0 -112.5px} #loading-wrapper .loading-section{position:fixed;top:0;width:50%;height:100%;background:#f1f1f1;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)} #loading-wrapper .loading-section.section-left{background:#bc0808 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7FLOIvr2ZVp7W4FdqEiaNpDUKWCrZpIL2jlRY2wOuN7ZvQtKfrrsNrc-iEmRMDhpRlskD3tR3nM52fN2MoYF8-DMYjSr8O4eFxljIrvmnpXSHUepceJpiLMHxgEfxTSxU-aETV5yJ7JEU/s1600/lol1.jpg) top right no-repeat;left:0} #loading-wrapper .loading-section.section-right{background:#bc0808 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIl3-6zUonECIZMyWEB5pmQ44Ec30tO7cgVn6JZpHVjU8qlBrUJy-WvKh84NIbXAqPI8b5PR_uga4l6nDnaoxrg4uRwBkFn_R-NnHMLdvzTa2FURy0yGK8_NITwO1l5l43ftjfCq5nxlwQ/s1600/lol2.jpg) top left no-repeat;right:0} #loading-wrapper .loading-section.section-left a,#loading-wrapper .loading-section.section-right a{width:70%;height:100%;cursor:pointer;display:block}#loading-wrapper .loading-section.section-right a{margin-left:30%} .loaded #loading-wrapper .loading-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)} .loaded #loading-wrapper .loading-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);transition:all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)} .loaded #loading{opacity:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out} .loaded #loading-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all .3s 1s ease-out;transition:all .3s 1s ease-out} .adswide{margin:0 auto;padding:0;width:980px} .contenttdb{position:relative;z-index:1000} ._label_ h2{animation: fadeInDown 2s;font-size:50px;font-weight:500;color:#FFF;letter-spacing:0;margin:0;padding:0;font-family:Lobster;text-transform:uppercase} ._label_ p{animation: slideIn 3s;text-transform: capitalize;font-size:30px;font-weight:100;color:white;margin:25px 0 0;padding:0} ._label_{margin:0 auto;text-align:center;padding:0} @-webkit-keyframes sdb05{ 0% {opacity: 0} 50% {opacity: 1} 100% {opacity: 0}} @keyframes sdb05{ 0% {opacity: 0} 50% {opacity: 1} 100% {opacity: 0}} @keyframes slideIn {0%{opacity:0;transform:translateY(-500px)}100 {opacity:1;transform:translateY(0)}} @-webkit-keyframes slideIn {0%{opacity:0;transform:translateY(-500px)}100 {opacity:1;transform:translateY(0)}} @keyframes fadeInDown {0%{opacity:0;transform:translateY(-250px)}100 {opacity:1;transform:translateY(0)}} @-webkit-keyframes fadeInDown {0%{opacity:0;transform:translateY(-250px)}100 {opacity:1;transform:translateY(0)}} @keyframes slideToLeft { 0% {position:relative;left:1000px} 100%{position:relative;left:0} } @keyframes trangtritet { 0% {opacity:0} 100%{opacity:1} } </style> <script> $(document).ready(function() { setTimeout(function(){ $('body').addClass('loaded'); }, 4000); }); </script> <div id='loading-wrapper'> <div id='loading'/> <div class='loading-section section-left'><a href='/' target='_top'/></div> <div class='loading-section section-right'><a href='/' target='_top'/></div> <div class='contenttdb'> <div class='_label_'> <h2 class='_title'>chúc mừng năm mới 2019</h2> <p>An khang thịnh vượng - Vạn sự như ý</p> </div> </div> </div>
Lưu ý: Bạn có thể dùng thẻ điều kiện để tiện ích chỉ xuất hiện tại trang bạn muốn.
Chúc vui vẻ!