Tạo popup Happy New Year có nhạc cực chất cho Blogspot [Update 2025]

Mỗi dịp Tết đến, chắc hẳn nhiều bạn muốn website/blog của mình thêm phần rực rỡ và mang không khí lễ hội. Bài viết này mình chia sẻ đoạn code Popup Happy New Year 2026 với tone màu đỏ Tết, đi kèm hiệu ứng pháo hoa lung linh và nhạc nền YouTube cực kỳ bắt mắt.

Popup này rất phù hợp để chèn vào website, blogspot hoặc bất kỳ nền tảng nào hỗ trợ HTML/CSS/JS.

Tạo popup Happy New Year có nhạc cực chất cho Blogspot.

Demo hiệu ứng

Popup nổi bật với nền đỏ Tết sang trọng
Hiệu ứng pháo hoa nổ phía sau popup
Nhạc nền YouTube (tùy chỉnh link video theo ý muốn)
Giao diện responsive, hiển thị tốt trên cả máy tính và điện thoại

Code Popup Happy New Year 2026

Chèn đoạn code sau ngay trước thẻ </body> của template/blog:

<b:if cond='data:view.isHomepage'>
<style>
/* ===== Popup Happy New Year 2026 ===== */
#NY2026-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 460px;
  background: linear-gradient(160deg, #8b0000, #b71c1c, #d50000);
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(255, 193, 7, 0.7);
  z-index: 10001;
  text-align: center;
  padding: 25px 20px 30px;
  color: #fff;
  overflow: hidden;
}
#NY2026-popup .close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  color: #b71c1c;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: 0.2s;
  z-index: 10;
}
#NY2026-popup .close-btn:hover {
  background: #ffeb3b;
  color: #000;
}
#NY2026-popup h2 {
  font-size: 26px;
  font-weight: 800;
  color: #ffeb3b;
  margin: 10px 0 8px;
  text-shadow: 0 0 12px #fff176, 0 0 20px #f57f17;
}
#NY2026-popup h1 {
  font-size: 64px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 15px #ffeb3b, 0 0 40px #fbc02d;
  margin: 0 0 12px;
}
#NY2026-popup p {
  font-size: 15px;
  color: #fffde7;
  margin: 0 0 20px;
  font-weight: 500;
}

/* YouTube player */
#NY2026-popup iframe {
  width: 100%;
  height: 250px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(255,255,255,0.3);
  z-index: 5;
  position: relative;
}

/* ===== Canvas pháo bông ===== */
#fireworks-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 10000;
  pointer-events: none;
}
</style>
<!-- Canvas pháo hoa -->
<canvas id="fireworks-canvas"></canvas>
<div id="NY2026-popup">
  <button class="close-btn" onclick="document.getElementById('NY2026-popup').style.display='none'">✖</button>
  <h2>🎇 CHÚC MỪNG NĂM MỚI</h2>
  <h1>2026</h1>
  <p>An Khang – Thịnh Vượng – Vạn Sự Như Ý</p>
  <iframe src="https://www.youtube.com/embed/V-ZjWsTuwlw?autoplay=1&mute=0"
    title="Happy New Year - ABBA"
    allow="autoplay; encrypted-media"
    allowfullscreen>
  </iframe>
</div>

<script>
/* ===== Hiệu ứng pháo hoa ===== */
const canvas = document.getElementById('fireworks-canvas');
const ctx = canvas.getContext('2d');
let fireworks = [];

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
resizeCanvas();
window.onresize = resizeCanvas;

class Firework {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.particles = [];
    const colors = ["#ffeb3b", "#f44336", "#ff9800", "#00e5ff", "#76ff03"];
    for (let i = 0; i < 80; i++) {
      const angle = (Math.PI * 2 * i) / 80;
      const speed = Math.random() * 4 + 2;
      this.particles.push({
        x: x,
        y: y,
        dx: Math.cos(angle) * speed,
        dy: Math.sin(angle) * speed,
        life: 100,
        color: colors[Math.floor(Math.random() * colors.length)]
      });
    }
  }
  update() {
    this.particles.forEach(p => {
      p.x += p.dx;
      p.y += p.dy;
      p.dy += 0.03;
      p.life--;
    });
    this.particles = this.particles.filter(p => p.life > 0);
    return this.particles.length > 0;
  }
  draw() {
    this.particles.forEach(p => {
      ctx.beginPath();
      ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
      ctx.fillStyle = p.color;
      ctx.fill();
    });
  }
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  fireworks.forEach((f, i) => {
    f.draw();
    if (!f.update()) fireworks.splice(i, 1);
  });
  requestAnimationFrame(animate);
}
animate();

setInterval(() => {
  const x = Math.random() * canvas.width;
  const y = Math.random() * (canvas.height / 2);
  fireworks.push(new Firework(x, y));
}, 1200);
</script>
</b:if>

Cách sử dụng

Copy toàn bộ đoạn code trên.
Chèn ngay trước thẻ </body> trong template website/blog.
Thay đổi link video YouTube nếu muốn.
Có thể tùy chỉnh màu sắc, font chữ để phù hợp giao diện.

Lời kết

Với đoạn code trên, bạn sẽ có ngay một Popup Happy New Year 2026 cực kỳ rực rỡ, mang đến không khí lễ hội cho website/blog. Không chỉ tạo sự ấn tượng với khách truy cập, mà còn là một lời chúc năm mới đầy ý nghĩa.