Code trang trí Tết cho website mới nhất
Chủ đề
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
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
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ị
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://image.homenest.com.vn/wp-content/uploads/2025/12/22121920/Cau-noi-cau-duoc-uoc-thay.png”/></a>
<a class=”homenest-tet-right” ><img src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121920/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://image.homenest.com.vn/wp-content/uploads/2025/12/22121919/Tan-tai-tan-loc-tan-binh-an.png” /></a>
<a class=”homenest-tet-right”><img src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121919/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://image.homenest.com.vn/wp-content/uploads/2025/12/22121917/Cau-chu-mung-xuan-sang-van-su-thanh-cong-cho-website.png” /></a>
<a class=”homenest-tet-right” ><img src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121917/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://image.homenest.com.vn/wp-content/uploads/2025/12/22121917/Cau-chu-Truc-Bao-Binh-an-tai-loc-den-cho-trang-tri-website.png” /></a>
<a class=”homenest-tet-right”><img src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121917/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://image.homenest.com.vn/wp-content/uploads/2025/12/22121916/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://image.homenest.com.vn/wp-content/uploads/2025/12/22121916/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 */ } |
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 */ /* Hiệu ứng lắc lư sang hai bên (giả lập gió thổi) */ /* — THIẾT LẬP CHUNG CHO HOA — */ /* Chống chọn văn bản/hình ảnh */ /* QUAN TRỌNG: Cho phép click xuyên qua hoa */ /* Cấu hình Animation */ /* — CẤU HÌNH VỊ TRÍ VÀ ĐỘ TRỄ RIÊNG TỪNG BÔNG — */ .flower:nth-of-type(1) { left: 1%; animation-delay: 0s, 0s; } /* Tắt hiệu ứng trên màn hình điện thoại để tránh lag máy người dùng */ |
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://image.homenest.com.vn/wp-content/uploads/2025/12/22121916/Hinh-anh-hoa-mai-decor-website.png” alt=”” /><img class=”flower” src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121916/Hoa-mai-decor-website.png” alt=”” /><img class=”flower” src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121916/Hinh-anh-hoa-mai-decor-website.png” alt=”” /><img class=”flower” src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121916/Hinh-anh-hoa-mai-decor-website.png” alt=”” /><img class=”flower” src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121916/Hinh-anh-hoa-mai-decor-website.png” alt=”” /> <img class=”flower” src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121916/Hoa-mai-decor-website.png” alt=”” /> <img class=”flower” src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121916/Hinh-anh-hoa-mai-decor-website.png” alt=”” /> <img class=”flower” src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121916/Hoa-mai-decor-website.png” alt=”” /> <img class=”flower” src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121916/Hinh-anh-hoa-mai-decor-website.png” alt=”” /> <img class=”flower” src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121916/Hinh-anh-hoa-mai-decor-website.png” alt=”” /> <img class=”flower” src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121916/Hinh-anh-hoa-mai-decor-website.png” alt=”” /> <img class=”flower” src=”https://image.homenest.com.vn/wp-content/uploads/2025/12/22121916/Hoa-mai-decor-website.png” alt=”” /> |
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
Hoặ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:
Hy 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
Bài viết mới nhất
Xem tất cả
Tích Hợp ERP, CRM Và HRM: Giải Pháp Đồng Bộ Dữ Liệu Giúp Doanh Nghiệp Tăng Trưởng Bền Vững
Tích hợp ERP, CRM và HRM giúp doanh nghiệp đồng bộ dữ liệu, tự động hóa quy trình và quản lý tập trung trên một nền tảng duy nhất. Doanh nghiệp có thể lựa chọn giải pháp All-in-One, tích hợp qua API/Middleware hoặc xây dựng hệ thống theo yêu cầu tùy theo quy mô và nhu cầu. Để triển khai hiệu quả, điều quan trọng không chỉ là lựa chọn phần mềm phù hợp mà còn là chuẩn hóa dữ liệu, thiết kế kiến trúc tích hợp hợp lý và đồng hành cùng đơn vị triển khai giàu kinh nghiệm. Với các doanh nghiệp có quy trình đặc thù, nền tảng tích hợp theo yêu cầu thường mang lại hiệu quả và khả năng mở rộng lâu dài hơn.
Thiết Kế Phần Mềm Bán Hàng: Những Tiêu Chí Quan Trọng Doanh Nghiệp Cần Biết Trước Khi Đầu Tư
Thiết kế phần mềm bán hàng giúp doanh nghiệp số hóa và tối ưu toàn bộ quy trình kinh doanh theo đúng mô hình vận hành riêng. Tùy vào quy mô, ngân sách và nhu cầu thực tế, doanh nghiệp có thể lựa chọn phần mềm có sẵn hoặc phát triển theo yêu cầu. Một dự án thường bao gồm các giai đoạn phân tích nghiệp vụ, thiết kế hệ thống, phát triển và triển khai, với chi phí và thời gian phụ thuộc vào mức độ phức tạp, tính năng và khả năng mở rộng. Việc lựa chọn đúng đơn vị phát triển không chỉ giúp tối ưu chi phí đầu tư mà còn tạo nền tảng quản trị bền vững và tăng trưởng lâu dài cho doanh nghiệp.
Một ngày làm việc của Business Analytics (BA) tại HomeNest Việt Nam sẽ như thế nào?
Tìm hiểu xem vai trò của BA tại HomeNest Việt Nam. Khám phá quy trình làm việc, cách giải quyết vấn đề, kinh nghiệm thực chiến và lời khuyên cho người mới.
Một ngày làm việc của Flutter Developer sẽ như thế nào?
Khám phá một ngày làm việc thực tế của Flutter Developer tại HomeNest Việt Nam. Đọc ngay để nắm bắt quy trình làm việc, cách giải quyết bài toán kinh doanh và những lời khuyên đắt giá cho lĩnh vực IT.
AI Chatbot GoQuestX – Trợ Lý Ảo Thế Hệ Mới Hỗ Trợ Không Gian Sống 24/7
Giải pháp AI Chatbot GoQuestX ứng dụng công nghệ trí tuệ nhân tạo tiên tiến, giúp trợ lý ảo thấu hiểu ngữ cảnh và giao tiếp tự nhiên như một chuyên gia. Doanh nghiệp hoàn toàn làm chủ hệ thống khi tự nạp tài liệu huấn luyện trực tiếp qua bảng điều khiển mà không cần kiến thức lập trình. Tích hợp mượt mà trên mọi website hiện đại cùng cơ chế quản trị bảo mật đa cấp, giải pháp này giúp tự động hóa khâu chăm sóc khách hàng toàn thời gian, qua đó cắt giảm tối đa chi phí vận hành và giải phóng nguồn nhân lực cho các mục tiêu chiến lược cốt lõi.
Chuyển Đổi Số Nông Nghiệp: Lợi Ích, Giải Pháp Và Cơ Hội Tăng Trưởng Bền Vững
Chuyển đổi số nông nghiệp không chỉ giúp tự động hóa quy trình sản xuất mà còn tạo nền tảng để doanh nghiệp quản lý dựa trên dữ liệu, tối ưu chi phí và nâng cao năng suất một cách bền vững. Việc ứng dụng các công nghệ như AI, IoT, Blockchain và phần mềm quản lý nông nghiệp giúp tăng khả năng truy xuất nguồn gốc, cải thiện chất lượng nông sản và nâng cao năng lực cạnh tranh trong bối cảnh thị trường ngày càng yêu cầu cao về minh bạch, hiệu quả và phát triển bền vững.
