Code trang trí noel cho website blogger cực đẹp với hiệu ứng tuyết rơi

Giáng sinh noel năm 2020 sắp tới. Chúng tôi kính chúc bạn đọc và Quý khách hàng một mùa giáng sinh ấm áp và hạnh phúc, thành công trong công việc và cuộc sống.

Nay Công nghệ webblog xin gửi tới mọi người hướng dẫn trang trí giáng sinh noel cho website của các bạn với hiệu ứng tuyết rơi, và background noel.... hoàn toàn bằng CSS và HTML không ảnh hưởng tới tốc độ tải trang website của bạn.

Bước 1: vào chủ đề  --> Tùy chỉnh --> chỉnh sửa HTML tìm ]]></b:skin> thêm đoạn code này trên code vừa tìm được.

body {background-color: #C6E6F1;}
body:before {content:"";background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfGgWWBqq1MDCOLBU-Ff7CYgBkcxVJlwbjxej3l0O9I0fvc-YE7y4GkMnSvanW4FaSAnhwvSxemokXWXMfLr2t8_ovrcAu2dZwjtw_CEuGb-Y3hUU2Jmi44wmSrcHE58eKg50uWQuJUg/s0/bg-top-min.png) no-repeat center top;position:absolute;left:0;top:0;width:100%;height:997px;z-index:-5;}
body footer {overflow:visible;position:relative;}
body footer:before {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirvRXS10B_G_0s-wCL1YPosg7SI4FrRGYE9Y7uAwUocvNXxlbt4nLyTUGrl9iGarQ3yhFKSEyTnS68IXr8PYUjjm89TGi-U1SEFE19gPEXRVSXQOJ84ABKVk8aA4bAL90MwljjmpiNh2k/s0/bg-footer-min.png) no-repeat center top;content:"";position:absolute;left:0;height:444px;top:-444px;width:100%;z-index:-5;}
.snow-container{position:fixed;width:100%;max-width:100%;z-index:99999;pointer-events:none;overflow:hidden;top:0;height:100%} .snow{display:block;position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;pointer-events:none;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-animation:snow linear infinite;animation:snow linear infinite} .snow.foreground{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUStVFq00pBgezGP1LSblnbtR3_39jAKXy1FvKnH6CkKhP4dVZDwL9xFxxz6D9hCLXMUEpY1u4GNZVRSkloVdA02KQO_gqTVuZTCMe8wkX5fs9xigKBjncF_tUXI3wvjXBE6uMAh4zFPQ/s1600/s1.png);-webkit-animation-duration:15s;animation-duration:10s} .snow.foreground.layered{-webkit-animation-delay:7.5s;animation-delay:7.5s} .snow.middleground{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt5rqG7lJkcmbO03NJVqOdTFtomziqHplpaTl12e-xI22jkjULGLaJfqI7cs8iBv8nBd7Ah0om2fI96fNpFK1Et5-_o5o9eRlCKXd8zy3mrQYNI6GTLxKADypgGme9gTQSEbIgdZGbM_E/s1600/s2.png);-webkit-animation-duration:20s;animation-duration:15s} .snow.middleground.layered{-webkit-animation-delay:10s;animation-delay:10s} .snow.background{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIWYcIJvOhZenvVKOeN5SnwGDKOHjq3oJxKYuatrJ7BLMycL1NEXO8Qyw5JPTcbfVoljDlJdkUu8RlqvC4NaLKQETHjRSXChroSkGNCa4P63WnaABvgLYS0EMkFu8h60Ia9jzbU-9afmM/s1600/s3.png);-webkit-animation-duration:25s;animation-duration:20s} .snow.background.layered{-webkit-animation-delay:12.5s;animation-delay:12.5s} @-webkit-keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}} @keyframes snow{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{-webkit-transform:translate3d(5%,100%,0);transform:translate3d(5%,100%,0)}}

Bước 2: Tìm thẻ </body> hoặc &lt;!--<head/>--&gt; với theme tại congnghewebblog.com

<div class='snow-container'>
<div class='snow foreground'/>
<div class='snow foreground layered'/>
<div class='snow middleground'/>
<div class='snow middleground layered'/>
<div class='snow background'/>
<div class='snow background layered'/>
</div>

Xong bạn lưu lại là bạn đã hoàn thành xong các bước trang trí noel cho website của mình.

Mình sẽ cập nhật các hướng dẫn tiếp theo ở bài viết này, các bạn quan tâm thì có thể ghé thăm và cập nhật.

Nếu có vướng mắc gì các bạn có thể để lại comment mình sẽ giải đáp và hỗ trợ. Thân!