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;}Bước 2: Tìm thẻ </body> hoặc <!--<head/>--> với theme tại congnghewebblog.com
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)}}
<div class='snow-container'>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.
<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>
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!
CÔNG NGHỆ WEBBLOG - CUNG CẤP DỊCH VỤ TEMPLATE BLOGSPOT
Địa chỉ: Đường Lê Trọng Tấn – Dương Nội – Hà Đông – Hà Nội (Đối diện công ty sym Hà Đông)
Hotline: 09.66.22.0806 – 0916.72.69.59
Mail: congnghewebblog@gmail.com – FB: https://www.facebook.com/dechexanh
CÓ THỂ BẠN QUAN TÂM
No comments: