Trang trí tết Kỷ Hợi 2019 cho blogspot

Nhân dịp sắp tới tết Nguyên Đán Kỷ Hợi, gọi là tạo không khí năm mới cho blog khi có khách truy cập chúng ta cũng nên có chút gì đó để khách truy cập cảm nhận.Tận dụng code cũ của blog Giangna mình thay ảnh và sửa sang lại để đón tết Kỷ Hợi 2019.

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://4.bp.blogspot.com/-lOA0PINVjqU/XALHul_FH7I/AAAAAAAAClE/IsuQ6Fa7zL8QNal-3_Sux7MZd2pIEkaXwCLcBGAs/s1600/lol1.jpg) top right no-repeat;left:0}
#loading-wrapper .loading-section.section-right{background:#bc0808 url(https://2.bp.blogspot.com/-cCtDikSesgw/XALHuxG856I/AAAAAAAAClI/5G75liIwQ_AZmOH654LmkPLMnZgeYcq1gCLcBGAs/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(){
  $(&#39;body&#39;).addClass(&#39;loaded&#39;);
 }, 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ẻ!