Code trang trí Tết cho website 2025 mới nhất

3. Chúc tết đến trăm điều như ý – Mừng xuân sang vạn sự thành công

<a class="luta-tet-left" ><img src="https://lutaweb.com/wp-content/uploads/2021/12/chuc-tet-den-tram-dieu-nhu-y.png" /></a>
<a class="luta-tet-right" ><img src="https://lutaweb.com/wp-content/uploads/2021/12/chuc-tet-den-tram-dieu-nhu-y-phai.png" /></a>

4. Trúc báo bình an  tài lộc đến – Mai khai phú quý lộc huyền lai

<a class="luta-tet-left"><img src="https://lutaweb.com/wp-content/uploads/2021/12/truc-bao-binh-an-tai-loc-den.png"  /></a>
<a class="luta-tet-right"><img src="https://lutaweb.com/wp-conten/uploads/2021/12/truc-bao-binh-an-tai-loc-den-phai.png" /></a>

Hoặc nếu bạn sử dụng theme Flatsome và có tạo một Blocks Fooder riêng bạn hãy thêm đoạn code này vào đó

Tải về trọn bộ câu đối tết: link tải google drive (300MB)

2 Trang trí tết cho website bằng cách thay đổi ảnh nền

Bạn có thể thay đổi ảnh nền phong cách mùa xuân cho website của mình, một số theme cho phép bạn thay đổi ảnh nền ngay trên chức năng Tùy biến của website, hoặc bạn có thể thêm vào đoạn code tại khung Tùy biến -> Css bổ sung sau nếu website của bạn được thiết kế trên mã nguồn wordpress

#content{
background-image: url(https://lutaweb.com/wp-content/uploads/2021/12/hoa-tet-1-2.png);/*đưa link hình ảnh nền vào đây nhé*/
background-repeat: no-repeat;
background-attachment: fixed;
background-position:0% 0%; /*vị trí hình ảnh*/
background-size:cover;
}

Hãy lưu ý trong việc trang trí, đừng chèn quá nhiều nội dung để tránh bị rối mắt nhé

3 Trang trí tết cho website bằng code hoa mai rơi

Tương tự như khi thêm câu đối vào website, khi tạo hiệu ứng cánh hoa rơi bạn cũng làm theo 2 bước sau

Bước 1: bạn hãy vào Tùy biến -> Css bổ sung trên website và thêm vào đoạn code css

Code css

/* Tuy chinh hieu ung roi*/
/*www.lutaweb.com*/
@-webkit-keyframes flowers-fall {
0% {top:-10%}
100% {top:100%}
}
@-webkit-keyframes flowers-shake {
0%,100% {-webkit-transform:translateX(0);transform:translateX(0)}
50% {-webkit-transform:translateX(80px);transform:translateX(80px)}
}
@keyframes flowers-shake {
0%,100%{ transform:translateX(0)}
50% {transform:translateX(80px)}
}
.flower {
height:auto;
width:20px;/*chinh kich thuoc hoa*/
text-shadow: 0 0 5px #000;
position:fixed;
top:-10%;
z-index:9999;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
-webkit-animation-name:flowers-fall,flowers-shake;
-webkit-animation-duration:10s,3s;
-webkit-animation-timing-function:linear,ease-in-out;
-webkit-animation-iteration-count:infinite,infinite;
-webkit-animation-play-state:running,running;
animation-name:flowers-fall,flowers-shake;
animation-duration:10s,3s;
animation-timing-function:linear,ease-in-out;
animation-iteration-count:infinite,infinite;
animation-play-state:running,running;
}
.flower:nth-of-type(0){
left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s
}
.flower:nth-of-type(1){
left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s
}
.flower:nth-of-type(2){
left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s
}
.flower:nth-of-type(3){
left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s
}
.flower:nth-of-type(4){
left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s
}
.flower:nth-of-type(5){
left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s
}
.flower:nth-of-type(6){
left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s
}
.flower:nth-of-type(7){
left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s
}
.flower:nth-of-type(8){
left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s
}
.flower:nth-of-type(9){
left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s
}
.flower:nth-of-type(10){
left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s
}
.flower:nth-of-type(11){
left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s
}

Bước 2: Bạn vào Tùy biến -> Fooder và thêm đoạn html để hiển thị hiệu ứng hoa mai rơi ở tất cả các trang như trên website của Lutaweb.

Mã Html

<div class="flowers" aria-hidden="true">
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2022/01/hoa-mai-1.png"/></div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-2.png"/> </div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2022/01/hoa-mai-1.png"/> </div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2022/01/hoa-mai-1.png"/> </div>
<div class="flower"> <img src="https://lutaweb.com/wp-content/uploads/2022/01/hoa-mai-1.png"/></div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-2.png"/> </div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2022/01/hoa-mai-1.png"/> </div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-2.png"/> </div>
<div class="flower"> <img src="https://lutaweb.com/wp-content/uploads/2022/01/hoa-mai-1.png"/></div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2022/01/hoa-mai-1.png"/> </div>
<div class="flower"> <img src="https://lutaweb.com/wp-content/uploads/2022/01/hoa-mai-1.png"/></div>
<div class="flower"><img src="https://lutaweb.com/wp-content/uploads/2021/12/hoa-mai-2.png"/> </div>
</div>

4 Sử dụng plugin trang trí tết cho website wordpress

Ngoài 3 cách trên bạn cũng có thể sử dụng plugin có sẵn các chức năng như: nhạc, hoa rơi, pháo hoa, trang trí tết…của bác Lê Văn Toản.

Bạn chỉ cần cài đặt Plugin và sử dụng

Link tải plugin: DevVN – Trang trí Tết Việt Nam

Mừng năm 2025 chúc các bạn Năm mới Phát Tài – An Khang – Thịnh Vượng

Bạn hãy comment bên dưới nếu bạn cài đặt không thành công hoặc cần hướng dẫn cho website của mình nhé!

Từ khóa: Trang trí tết cho website 2025

 Xem thêm:

• • 30 bộ màu gradient đẹp chọn lọc
  • 50 bảng màu đẹp cho website từ các website đã đạt giải thưởng
  • Hơn 30 mã màu gradient đẹp cho website