Trang trí Tết cho Blogspot bằng đèn lồng CSS – Nhẹ, đẹp và không cần JavaScript

Mỗi dịp Tết đến, mình luôn muốn website hay blog của mình có chút gì đó khác hơn ngày thường: một chút sắc đỏ, chút không khí xuân để người ghé thăm cảm nhận ngay Tết đang về.

Sau khi thử nhiều cách (banner, ảnh động, plugin…), mình thấy trang trí Tết bằng CSS thuần là giải pháp gọn – nhẹ – hiệu quả nhất cho Blogspot. Và dưới đây là đoạn code đèn lồng Tết mình đang dùng, chia sẻ lại cho anh em nào cần.

Trang trí Tết cho Blogspot bằng đèn lồng CSS – Nhẹ, đẹp và không cần JavaScript

Code được lấy từ .Thinhem Blog, các bạn ghé sang ủng hộ Blog này nhé!

Vì sao mình chọn trang trí Tết bằng CSS?

• ✔ Không dùng JavaScript → load nhanh, không lag
• ✔ Không dùng ảnh → nhẹ, không tốn băng thông
• ✔ Không ảnh hưởng SEO
• ✔ Hoạt động tốt trên Blogspot, WordPress, web tĩnh
• ✔ Có responsive cho mobile

Đặc biệt, code này dùng đèn lồng đỏ đung đưa nhẹ hai bên màn hình, tạo cảm giác rất Tết nhưng không gây rối mắt.

Hiệu ứng đèn lồng Tết gồm những gì?

• 🎊 Hai đèn lồng cố định ở góc trên trái – phải
• 🎐 Đung đưa nhẹ với tốc độ khác nhau
• 🧧 Màu đỏ – vàng truyền thống ngày Tết
• 🖱 Không cản thao tác người dùng (pointer-events: none)

Phù hợp cho:

• Trang chủ Blogspot
• Trang bài viết
• Website doanh nghiệp dịp Tết
• Blog cá nhân

Hướng dẫn chèn đèn lồng Tết vào Blogspot

Bước 1: Vào chỉnh sửa giao diện

1. Đăng nhập Blogger
2. Chọn Giao diện
3. Chọn Chỉnh sửa HTML
4. Tìm thẻ </body>

Bước 2: Dán tất cả code dưới đây trước thẻ </body> hoặc các bạn cũng có thể đặt vào Widget HTML/Javascript:

<style>
@media (max-width: 767.98px) {
  .deng-box1 { transform: scale(0.5) rotate(1deg); }
  .deng-box2 { transform: scale(0.5) rotate(1deg); }
  .deng { top: -65px; }
}

.deng-box1 { 
  position: fixed; 
  top: -30px; 
  left: 5px; 
  z-index: 9999; 
  pointer-events: none; 
}

.deng-box2 { 
  position: fixed; 
  top: -30px; 
  right: 5px; 
  z-index: 9999; 
  pointer-events: none; 
}

.deng { 
  position: relative; 
  width: 120px; 
  height: 90px; 
  margin: 50px; 
  background: rgba(216, 0, 15, 0.8); 
  border-radius: 50%; 
  transform-origin: 50% -100px; 
  animation: swing 3s ease-in-out infinite; 
  box-shadow: -5px 5px 50px 4px rgb(250, 108, 0); 
}

.deng-box2 .deng {
  animation: swing 5s ease-in-out infinite;
  box-shadow: -5px 5px 30px 4px rgb(252, 144, 61);
}

.deng::before { 
  position: absolute; 
  top: -7px; 
  left: 29px; 
  height: 12px; 
  width: 60px; 
  content: " "; 
  display: block; 
  z-index: 999; 
  border-radius: 5px 5px 0 0; 
  border: 1px solid rgb(220, 143, 3); 
  background: linear-gradient(to right, rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3)); 
}

.deng::after { 
  position: absolute; 
  bottom: -7px; 
  left: 10px; 
  height: 12px; 
  width: 60px; 
  content: " "; 
  display: block; 
  margin-left: 20px; 
  border-radius: 0 0 5px 5px; 
  border: 1px solid rgb(220, 143, 3); 
  background: linear-gradient(to right, rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3), rgb(255, 165, 0), rgb(220, 143, 3)); 
}

.xian { 
  position: absolute; 
  top: -20px; 
  left: 60px; 
  width: 2px; 
  height: 20px; 
  background: rgb(220, 143, 3); 
}

.deng-a { 
  width: 100px; 
  height: 90px; 
  background: rgba(216, 0, 15, 0.1); 
  margin: 12px 8px 8px 10px; 
  border-radius: 50%; 
  border: 2px solid rgb(220, 143, 3); 
}

.deng-b { 
  width: 45px; 
  height: 90px; 
  background: rgba(216, 0, 15, 0.1); 
  margin: -2px 8px 8px 26px; 
  border-radius: 50%; 
  border: 2px solid rgb(220, 143, 3); 
}

.deng-t { 
  font-family: Arial, "Lucida Grande", Tahoma, sans-serif; 
  font-size: 1.3rem; 
  color: rgb(255, 165, 0); 
  font-weight: bold; 
  line-height: 42px; 
  text-align: left; 
  width: 25px; 
  margin: 5px auto; 
}

.shui-a { 
  position: relative; 
  width: 5px; 
  height: 20px; 
  margin: -5px 0 0 59px; 
  animation: swing 4s ease-in-out infinite; 
  transform-origin: 50% -45px; 
  background: rgb(255, 165, 0); 
  border-radius: 0 0 5px 5px; 
}

.shui-c { 
  position: absolute; 
  top: 18px; 
  left: -2px; 
  width: 10px; 
  height: 35px; 
  background: rgb(255, 165, 0); 
  border-radius: 0 0 0 5px; 
}

.shui-b { 
  position: absolute; 
  top: 14px; 
  left: -2px; 
  width: 10px; 
  height: 10px; 
  background: rgb(220, 143, 3); 
  border-radius: 50%; 
}

@keyframes swing { 
  0% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
  100% { transform: rotate(-10deg); }
}</style>
<div class="deng-box1">
  <div class="deng">
    <div class="xian"></div>
    <div class="deng-a">
      <div class="deng-b"><div class="deng-t"></div></div>
    </div>
    <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
  </div>
</div>
<div class="deng-box2">
  <div class="deng">
    <div class="xian"></div>
    <div class="deng-a">
      <div class="deng-b"><div class="deng-t"></div></div>
    </div>
    <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
  </div>
</div>
  

Lưu lại là xong, không cần cài thêm plugin hay script nào.

Lưu ý khi sử dụng

• 🔸 Nên sử dụng trong dịp Tết để tránh rối giao diện
• 🔸 Có thể gỡ code sau mùng 10 để web quay lại trạng thái bình thường
• 🔸 Nếu web có header cố định, có thể hạ z-index xuống 999

Gợi ý nâng cấp thêm

• 🧧 Thêm chữ “Tết”, “Phúc”, “Lộc” vào đèn lồng
• 🎇 Kết hợp hoa mai, hoa đào bằng CSS
• ⏰ Chỉ hiển thị đèn lồng từ 25 tháng Chạp đến mùng 10
• 🌙 Chỉ hiển thị vào ban đêm

Những phần này có thể chỉnh rất dễ, mình sẽ chia sẻ chi tiết ở bài sau.

Kết luận

Trang trí Tết cho blog không cần cầu kỳ, chỉ cần một chi tiết nhỏ đúng không khí là đủ. Đoạn code đèn lồng CSS này theo mình là đẹp – nhẹ – an toàn, rất phù hợp cho Blogspot.

Anh em dùng thử, thấy hay thì cứ lưu lại dùng mỗi năm 🎊
Chúc mọi người một mùa Tết ấm áp – nhiều năng lượng mới!