Call us:
0898 - 994 - 298
Liên hệ

LIÊN HỆ HOMENEST.TECH

28 Mai Chí Thọ, Phường An Phú
Thành Phố Thủ Đức, Hồ Chí Minh, Việt Nam

0898 994 298
info@homenest.tech

Homenest

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

Quay lại Blog
Avatar of steve
Homenest
Bởi Steve
Tháng 12 17, 2025
Bản tin Homenest
Trang chủ / Bản tin Homenest/ Code trang trí Tết cho website mới nhất

Nội dung bài viết

Năm cũ đang dần khép lại và chỉ còn vài tuần nữa chúng ta sẽ bước sang năm mới. Đây chính là thời điểm lý tưởng để bắt đầu trang trí Tết cho website và chuẩn bị trước các mẫu lời chúc – sự kiện năm mới nhằm thu hút khách hàng.

Trong bài viết này, bạn sẽ tìm thấy những ý tưởng lời chúc năm mới gửi đến khách hàng cùng bộ câu đối Tết miễn phí. Chúng tôi cũng tổng hợp những mẫu thiệp chúc mừng đẹp – dễ chỉnh sửa – tải xuống miễn phí, giúp bạn nhanh chóng tạo nội dung Tết cho thương hiệu.

Hãy khám phá ngay bộ sưu tập ý tưởng trang trí website chào năm mới để làm mới giao diện và mang lại trải nghiệm ấn tượng cho khách hàng trong dịp Tết này nhé!

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

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

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

Vào css bổ sung thêm đoạn code trang trí

Code Css

CSS
/* Thiết lập chung cho cả 2 bên */
.homenest-tet-left,
.homenest-tet-right {
position: fixed;
top: 100px;
width: 180px; /* Kích thước câu đối */
z-index: 10; /* Nổi lên trên nội dung trang web */
pointer-events: none; /* Quan trọng: Cho phép người dùng click xuyên qua vùng trong suốt của ảnh */
}/* Định vị bên trái */
.homenest-tet-left {
left: 0;
}/* Định vị bên phải */
.homenest-tet-right {
right: 0;
}/* Ảnh bên trong tự co giãn theo khung (phòng trường hợp ảnh quá to) */
.homenest-tet-left img,
.homenest-tet-right img {
width: 100%;
height: auto;
display: block;
}/* Ẩn banner khi màn hình nhỏ hơn 1524px */
@media (max-width: 1524px) {
.homenest-tet-left,
.homenest-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 bằng câu đối

Xem thêm: Thiết Kế Website Tết Biến Trang Web Thành Không Gian Ngập Tràn Sắc Xuân

Có 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

HTML
<a class=”homenest-tet-left” ><img src=”https://homenest.com.vn/wp-content/uploads/2025/12/Cau-noi-cau-duoc-uoc-thay.png”/></a>

<a class=”homenest-tet-right” ><img src=”https://homenest.com.vn/wp-content/uploads/2025/12/Cau-noi-cau-duoc-uoc-thay.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

HTML
<a class=”homenest-tet-left” ><img src=”https://homenest.com.vn/wp-content/uploads/2025/12/Tan-tai-tan-loc-tan-binh-an.png”  /></a>

<a class=”homenest-tet-right”><img src=”https://homenest.com.vn/wp-content/uploads/2025/12/Tan-tai-tan-loc-tan-binh-an.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

HTML
<a class=”homenest-tet-left” ><img src=”https://homenest.com.vn/wp-content/uploads/2025/12/Cau-chu-mung-xuan-sang-van-su-thanh-cong-cho-website.png” /></a>

<a class=”homenest-tet-right” ><img src=”https://homenest.com.vn/wp-content/uploads/2025/12/Cau-chu-mung-xuan-sang-van-su-thanh-cong-cho-website.png” /></a>

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

HTML
<a class=”homenest-tet-left”><img src=”https://homenest.com.vn/wp-content/uploads/2025/12/Cau-chu-Truc-Bao-Binh-an-tai-loc-den-cho-trang-tri-website.png”  /></a>

<a class=”homenest-tet-right”><img src=”https://homenest.com.vn/wp-content/uploads/2025/12/Cau-chu-Truc-Bao-Binh-an-tai-loc-den-cho-trang-tri-website.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 đó

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

Bạn có thể làm mới website bằng cách thay đổi ảnh nền mang phong cách mùa xuân. Nhiều theme hỗ trợ tùy chỉnh giao diện cho phép bạn thay đổi ảnh nền trực tiếp trong phần Tùy biến (Customize).

Nếu website của bạn được xây dựng trên WordPress nhưng theme không hỗ trợ tính năng này, bạn vẫn có thể thêm ảnh nền bằng cách chèn đoạn CSS bổ sung trong mục Tùy biến → CSS bổ sung (Additional CSS). Hãy cùng mình tham khảo 2 phương pháp dưới đây nhé!

Phương án 1: Dùng cho ảnh trang trí (Khuyên dùng)

Dùng khi ảnh là một cành đào trong suốt (PNG) nằm ở góc, giữ nguyên kích thước gốc để không bị vỡ.

CSS
#content {
/* Đổi sang HTTPS để tránh lỗi bảo mật */
background-image: url(‘https://homenest.com.vn/wp-content/uploads/2025/12/Hoa-dao-ngay-tet-decor-website.png’);background-repeat: no-repeat;
background-attachment: fixed; /* Cố định ảnh khi cuộn chuột *//* Vị trí: top left (góc trên trái). Có thể đổi thành ‘top right’ nếu muốn góc phải */
background-position: top left;/* QUAN TRỌNG: Dùng ‘auto’ để giữ kích thước gốc của ảnh hoa đào, không bị kéo giãn */
background-size: auto;/* Mẹo nhỏ: Nếu ảnh làm khó đọc chữ, hãy thêm độ mờ cho nội dung nền (tùy chọn) */
/* background-blend-mode: overlay; */
}

Phương án 2: Dùng cho ảnh nền toàn màn hình

Dùng khi ảnh là một bức tranh lớn hoặc hoa văn mờ phủ kín toàn bộ khung nội dung.

CSS
#content {
background-image: url(‘https://homenest.com.vn/wp-content/uploads/2025/12/Hoa-dao-ngay-tet-decor-website.png’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center; /* Căn giữa ảnh */
background-size: cover; /* Phủ kín toàn bộ khung */
}		 
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

CSS
/* — ĐỊNH NGHĨA HIỆU ỨNG ĐỘNG (KEYFRAMES) — */

/* Hiệu ứng rơi từ trên xuống dưới */
@keyframes flowers-fall {
0% { top: -10%; }
100% { top: 100vh; } /* Dùng vh để đảm bảo rơi hết chiều cao màn hình */
}

/* Hiệu ứng lắc lư sang hai bên (giả lập gió thổi) */
@keyframes flowers-shake {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(50px); } /* Giảm biên độ lắc còn 50px cho mượt hơn (cũ 80px hơi gắt) */
}

/* — THIẾT LẬP CHUNG CHO HOA — */
.flower {
position: fixed;
top: -10%;
z-index: 9999;
width: 20px; /* Kích thước hoa */
height: auto;

/* Chống chọn văn bản/hình ảnh */
-webkit-user-select: none;
user-select: none;
cursor: default;

/* QUAN TRỌNG: Cho phép click xuyên qua hoa */
pointer-events: none;

/* Cấu hình Animation */
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;
}

/* — CẤU HÌNH VỊ TRÍ VÀ ĐỘ TRỄ RIÊNG TỪNG BÔNG — */
/* Lưu ý: CSS đếm từ 1, không phải 0 */

.flower:nth-of-type(1) { left: 1%; animation-delay: 0s, 0s; }
.flower:nth-of-type(2) { left: 10%; animation-delay: 1s, 1s; }
.flower:nth-of-type(3) { left: 20%; animation-delay: 6s, 0.5s; }
.flower:nth-of-type(4) { left: 30%; animation-delay: 4s, 2s; }
.flower:nth-of-type(5) { left: 40%; animation-delay: 2s, 2s; }
.flower:nth-of-type(6) { left: 50%; animation-delay: 8s, 3s; }
.flower:nth-of-type(7) { left: 60%; animation-delay: 6s, 2s; }
.flower:nth-of-type(8) { left: 70%; animation-delay: 2.5s, 1s; }
.flower:nth-of-type(9) { left: 80%; animation-delay: 1s, 0s; }
.flower:nth-of-type(10){ left: 90%; animation-delay: 3s, 1.5s; }
.flower:nth-of-type(11){ left: 25%; animation-delay: 2s, 0s; }
.flower:nth-of-type(12){ left: 65%; animation-delay: 4s, 2.5s; }

/* Tắt hiệu ứng trên màn hình điện thoại để tránh lag máy người dùng */
@media (max-width: 768px) {
.flower {
display: none !important;
}
}

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

HTML
<div class=”flowers” aria-hidden=”true”>
<img class=”flower” src=”https://homenest.com.vn/wp-content/uploads/2025/12/Hinh-anh-hoa-mai-decor-website.png” alt=”” /><img class=”flower” src=”https://homenest.com.vn/wp-content/uploads/2025/12/Hoa-mai-decor-website.png” alt=”” /><img class=”flower” src=”https://homenest.com.vn/wp-content/uploads/2025/12/Hinh-anh-hoa-mai-decor-website.png” alt=”” />

<img class=”flower” src=”https://homenest.com.vn/wp-content/uploads/2025/12/Hinh-anh-hoa-mai-decor-website.png” alt=”” />

<img class=”flower” src=”https://homenest.com.vn/wp-content/uploads/2025/12/Hinh-anh-hoa-mai-decor-website.png” alt=”” />

<img class=”flower” src=”https://homenest.com.vn/wp-content/uploads/2025/12/Hoa-mai-decor-website.png” alt=”” />

<img class=”flower” src=”https://homenest.com.vn/wp-content/uploads/2025/12/Hinh-anh-hoa-mai-decor-website.png” alt=”” />

<img class=”flower” src=”https://homenest.com.vn/wp-content/uploads/2025/12/Hoa-mai-decor-website.png” alt=”” />

<img class=”flower” src=”https://homenest.com.vn/wp-content/uploads/2025/12/Hinh-anh-hoa-mai-decor-website.png” alt=”” />

<img class=”flower” src=”https://homenest.com.vn/wp-content/uploads/2025/12/Hinh-anh-hoa-mai-decor-website.png” alt=”” />

<img class=”flower” src=”https://homenest.com.vn/wp-content/uploads/2025/12/Hinh-anh-hoa-mai-decor-website.png” alt=”” />

<img class=”flower” src=”https://homenest.com.vn/wp-content/uploads/2025/12/Hoa-mai-decor-website.png” alt=”” />
</div>

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

Ngoài ra hiện tại cũng đã có rất nhiều plugin hỗ trợ trong việc cài đặt các chủ đề Tết cho website khác nhau mà bạn có thể tham khảo trên các cộng đồng và diễn đàn lớn, để làm cho Website của bạn trở nên đẹp và xịn hơn. Bằng cách thêm plugin thông qua các bước dưới đây:

Bước 1: Bạn vào phần thêm plugin

Thêm plugin

Bước 2: Bạn có thể tìm kiếm plugin mình muốn và tìm kiếm để cài đặt vào
Tìm kiếm pluginHoặc nếu bạn đã tải plugin đó về thông qua cộng đồng và muốn cài đặt dùng ngay thì có thể làm theo thứ tự các bước dưới đây:

Hướng dẫn cài plugin bằng file zipHy vọng thông qua bài viết này HomeNest đã mang đến cho bạn những thông tin hữu ích về cách làm sao để cho website của bạn đẹp và phù hợp nhất cho ngày Tết. Nếu bạn thấy bài viết này hay thì có thể gửi cho bạn bè tham khảo và tiếp tục ủng hộ HomeNest trong những bài viết hữu ích khác nhé!

Nếu bạn muốn có cho mình một website đẹp, xịn, hiện đại và chuẩn SEO thì hãy liên hệ ngay cho HomeNest để được tư vấn giải pháp thiết kế Website phù hợp cho ngày Tết nhé.

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

"HomeNest ứng dụng công nghệ mới để thiết kế website và phần mềm,
giải quyết triệt để bài toán số hóa cho doanh nghiệp."

Tư vấn miễn phí Tìm hiểu thêm
Bài Viết Trước
Bài Viết Sau

Bài viết gần đây

    Bước vào hành trình thành công




    Chọn dịch vụ

    Dịch vụ thiết kế app

    Dịch vụ thiết kế website chuyên nghiệp

    Dịch vụ thiết kế website theo mẫu

    Dịch vụ thiết kế phần mềm

    Dịch vụ thiết kế Landing page

    Dịch vụ chăm sóc website

    Dịch vụ SEO tổng thể

    Dịch vụ Facebook Ads

    Dịch vụ Zalo Ads

    Dịch vụ Tiktok Ads

    Dịch vụ Google Ads


    Gọi ngay Nhận ưu đãi
    Homenest

    Bình luận của bạn

    Địa chỉ email của bạn sẽ không được công khai. Các trường bắt buộc được đánh dấu *

    Bài viết đề xuất

    Khám phá thêm 10 bài viết khác từ danh mục này

  • 23 Th1 2026
    Chi Phí Phát Triển App Y Tế Năm: Tổng Quan Và Phân Tích Chi Tiết

    Chi Phí Phát Triển App Y Tế Năm: Tổng Quan Và Phân Tích Chi Tiết

    2026 giai đoạn bùng nổ của những đổi mới công nghệ trong lĩnh vực y tế,...

  • 23 Th1 2026
    Thiết Kế Phát Triển App Giải Trí SaaS: Cẩm Nang Từ A–Z

    Thiết Kế Phát Triển App Giải Trí SaaS: Cẩm Nang Từ A–Z

    Đến năm 2026, các App giải trí đã trở thành một phần không thể thiếu...

    • Chúng tôi luôn sẵn sàng giải đáp mọi thắc mắc của bạn

    Khám phá tương lai cùng dịch vụ HomeNest!

    Tại HomeNest, chúng tôi phát triển và triển khai các giải pháp phần mềm thông minh, hỗ trợ doanh nghiệp tự động hóa quy trình, nâng cao hiệu suất và giảm chi phí vận hành. Với đội ngũ kỹ sư công nghệ chuyên môn cao, chúng tôi mang đến những nền tảng công nghệ tiên tiến nhất, giúp doanh nghiệp vận hành hiệu quả như một hệ thống thông minh.!

    Tư vấn ngay Về chúng tôi

    Hotline tư vấn miễn phí

    +84 898 994 298

    Phản hồi qua email

    info@questx.com.vn

    Liên hệ với chúng tôi

    Gửi yêu cầu ngay hôm nay – HomeNest sẽ liên hệ và đề xuất giải pháp hiệu quả nhất cho doanh nghiệp bạn.!