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

Năm 2021 sắp kết thúc. Chỉ còn vài ngày nữa sẽ bước sang năm 2022, đây là thời điểm trong năm để bắt đầu chuẩn bị trang trí tết cho website và chuẩn bị sẵn các danh sách sự kiện năm mới thu hút khách của mình.

Bài viết nay giúp đây bạn có thể tìm thấy các ý tưởng lời chúc năm mới 2022 gửi đến khách hàng của mình với bộ câu đối miễn phí. Sau đây là những tấm thiệp chúc mừng có thể chỉnh sửa và hay nhất, Chọn bất kỳ tấm thiệp nào từ danh sách bạn có thể tải xuống miễn phí.

Bạn hãy xem qua bộ sưu tập ý tưởng trang trí website của mình trong năm mới nhé.

 

Trang trí tết cho website
Trang trí tết cho website bằng câu đối, hoa  rơi

Bài viết gồm 4 nội dung:

  • Trang trí tết cho website bằng câu đối
  • Thêm ảnh nền xuân
  • Code hoa mai rơi chỉ bằng Css và Html
  • Sử dụng plugin tết

1 Trang trí tết cho website bằng câu đối

Bước 1: Trước tiên 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 dưới đây

Trang trí tết cho website
Vào css bổ sung thêm đoạn code trang trí

 

Code Css

.luta-tet-left{
position:fixed;
top:100px;
left:0;
z-index:0;
width:180px;/*kích thước câu đối bên trái, bạn có thể tăng hoặc giảm*/
}
.luta-tet-right{
position:fixed;
top:100px;
right:0;
z-index:0;
width:180px;/*kích thước câu đối bên phải, bạn có thể tăng hoặc giảm*/
}
/* ẩn banner khi kích thước màn hình nhỏ hơn 15 inch để tránh cho mất nội dung*/
@media(max-width:1524px){
.luta-tet-left,.luta-tet-right{
display:none!important
}
}

 

Bước 2: bạn vào Tùy biến -> Fooder và thêm 1 trong 4 đoạn mã html với câu đối tương ứng để hiển thị

Trang trí tết cho website 3

4 câu đối tương ứng với 4 kiểu, hoặc bạn có thể tải về toàn bộ và tùy chỉnh theo ý muốn ở nút tải xuống

Bạn hãy chọn 1 trong 4 code dưới đây chèn vào Fooder để hiển thị

1. Cầu được ước thấy xuân như ý – Phúc lộc ngập tràn tết phồn vinh

<a class="luta-tet-left" ><img src="https://lutaweb.com/wp-content/uploads/2021/12/cau-duoc-uoc-thay-xuan-nhu-y-trai-2.png"/></a>
<a class="luta-tet-right" ><img src="https://lutaweb.com/wp-content/uploads/2021/12/cau-duoc-uoc-thay-xuan-nhu-y-phai-2.png"/></a>

 

2. Tân niên, tân phúc, tân phú quý – Tấn tài, tấn lộc, tấn bình an

<a class="luta-tet-left" ><img src="https://lutaweb.com/wp-content/uploads/2021/12/tan-nien-tan-phuc-tan-phu-quy-trai-2.png"  /></a>
<a class="luta-tet-right"><img src="https://lutaweb.com/wp-content/uploads/2021/12/tan-nien-tan-phuc-tan-phu-quy-phai-2.png" /></a>

 

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>

 

Trang trí tết cho website bằng câu đối
Trang trí tết cho website bằng câu đối

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;
}

 

Trang trí tết cho website bằng ảnh nền
Trang trí tết cho website bằng ảnh nền

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 2022 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 2022

 Xem thêm:

4.6/5 - (10 bình chọn)

1 bình luận “Code trang trí Tết cho website 2022 mới nhất

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *