Trang chủ
Blogspot Tips

Tổng hợp Code trang trí Tết cho blogspot

Năm nào cũng vậy, cứ gần tới năm mới là nhiều anh em bắt đầu đi tìm code để trang trí tết cho con Blogspot thân yêu của mình
Vũ Văn Hoàn

Trong không khí xuân đến, tết về thì việc trang trí thêm một chút cho Blog của bạn sẽ giúp mọi người cảm thấy ấm áp, vui vẻ và bạn đọc hơn. Nếu bạn đang sở hữu một blog hay website thì ngay bây giờ hãy bắt tay vào trang trí cho ngôi nhà thân yêu của mình thôi nào!

Tổng hợp Code trang trí Tết cho blogspot
Tổng hợp Code trang trí Tết cho blogspot.

Thông thường, khi trang trí tết cho các blog chúng ta thường sử dụng cành đào, cành mai, câu đối hay pháo hoa... chỉ cần trang trí đơn giản như vậy thôi cũng đủ làm nên không khí ngày tết cho trang blogspot của bạn rồi.

Code treo một nhành Mai trượt dọc

Các bạn sử dụng đoạn code sau dán trên thẻ </body>:

<!-- ========== CSS NHÀNH MAI TRƯỢT DỌC ========== -->
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<a href='/' style='display:scroll;position:fixed;Top:0px;left:5px;z-index: 999;'>
<img src='https://i.imgur.com/BTNPbnb.png' style='width:350px;'/></a>
</b:if>

Có thể sửa css và link ảnh theo ý bạn cho phù hợp với Blog của mình.

Code Pháo Hoa cho blogspot

Tiếng pháo trong ngày Tết không chỉ mang ý nghĩa xua đuổi tà ma hay những điều xui xẻo, mà đằng sau ánh sáng lấp lánh trong tiếng nổ giòn ấy là những ước mong về năm mới bình an, may mắn.


<!-- Fireworks Effect Start -->
<canvas id="fireworksCanvas"></canvas>
<button id="toggleFireworks">🎆 Tắt pháo hoa</button>

<script>
(function(){
  const canvas=document.getElementById('fireworksCanvas'),
        ctx=canvas.getContext('2d'),
        toggleBtn=document.getElementById('toggleFireworks');
  let W,H,fireworks=[],running=true,interval;

  function resize(){W=canvas.width=window.innerWidth;H=canvas.height=window.innerHeight;}
  window.addEventListener('resize',resize);resize();

  // âm thanh bụp bụp (play khi click)
  function playBoom(){
    if(!running) return;
    const audio=new Audio("https://cdn.pixabay.com/download/audio/2022/03/15/audio_3d2b5abce3.mp3?filename=small-explosion-6813.mp3");
    audio.volume=0.4;
    audio.play().catch(()=>{});
  }

  class Firework{
    constructor(x,y){
      this.particles=[];
      for(let i=0;i<30;i++){
        const angle=Math.random()*2*Math.PI,
              speed=Math.random()*3+2;
        this.particles.push({
          x:x,y:y,
          vx:Math.cos(angle)*speed,
          vy:Math.sin(angle)*speed,
          alpha:1,
          color:`hsl(${~~(Math.random()*360)},100%,60%)`
        });
      }
    }
    update(){
      this.particles.forEach(p=>{
        p.x+=p.vx;
        p.y+=p.vy;
        p.vy+=0.05;
        p.alpha-=0.01;
      });
      this.particles=this.particles.filter(p=>p.alpha>0);
    }
    draw(){
      this.particles.forEach(p=>{
        ctx.globalAlpha=p.alpha;
        ctx.fillStyle=p.color;
        ctx.beginPath();
        ctx.arc(p.x,p.y,2,0,2*Math.PI);
        ctx.fill();
      });
    }
  }

  function loop(){
    if(!running) return;
    ctx.clearRect(0,0,W,H);
    fireworks.forEach(f=>{f.update();f.draw();});
    fireworks=fireworks.filter(f=>f.particles.length>0);
    requestAnimationFrame(loop);
  }

  function startFireworks(){
    if(running) return;
    running=true;
    loop();
    interval=setInterval(()=>{
      fireworks.push(new Firework(Math.random()*W,Math.random()*H*0.6));
    },800);
    toggleBtn.textContent="🎆 Tắt pháo hoa";
  }

  function stopFireworks(){
    running=false;
    clearInterval(interval);
    ctx.clearRect(0,0,W,H);
    fireworks=[];
    toggleBtn.textContent="🎇 Bật pháo hoa";
  }

  toggleBtn.addEventListener('click',()=>{
    running ? stopFireworks() : startFireworks();
  });

  canvas.addEventListener('click',e=>{
    if(running){
      fireworks.push(new Firework(e.clientX,e.clientY));
      playBoom();
    }
  });

  // auto nổ ngẫu nhiên ban đầu
  interval=setInterval(()=>{
    fireworks.push(new Firework(Math.random()*W,Math.random()*H*0.6));
  },800);
  loop();
})();
</script>

<style>
#fireworksCanvas {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:9998;
  pointer-events:none; /* không che click nội dung */
}
#toggleFireworks {
  position:fixed;
  bottom:15px;
  left:15px; /* góc trái dưới */
  z-index:9999;
  padding:8px 14px;
  font-size:14px;
  border:none;
  border-radius:6px;
  background:#ff5722;
  color:#fff;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
#toggleFireworks:hover {
  background:#e64a19;
}
</style>
<!-- Fireworks Effect End -->

Code treo Câu đối Tết ý nghĩa

Phần này sẽ cho các bạn ý tưởng lời chúc năm mới với bộ câu đối miễn phí. Code cũng dễ làm chỉ với CSS và HTML thôi.

Tổng hợp Code trang trí Tết cho blogspot
Code câu đối Tết cho blogspot.

Viết CSS cho câu đối

Các bạn chèn đoạn code dưới đây vào trên thẻ ]]></b:skin> hoặc có thể cho nó vào cặp thẻ <style>...</style> chèn trên thẻ </body> cũng được:

.atn-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*/
}
.atn-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){
.atn-tet-left,.atn-tet-right{
display:none!important}}

Hiển thị câu đối ra Blog

Các bạn sử dụng các cặp câu đối phía dưới đây để chèn trên thẻ </body> hoặc có thể bỏ vào widget HTML/Javascipt:

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="atn-tet-left" ><img src="https://i.imgur.com/snmBZQe.png"/></a>
<a class="atn-tet-right" ><img src="https://i.imgur.com/R9gV6Z4.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="atn-tet-left" ><img src="https://i.imgur.com/aUFWu51.png"  /></a>
<a class="atn-tet-right"><img src="https://i.imgur.com/G8FtAi5.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="atn-tet-left" ><img src="https://i.imgur.com/ae4u53D.png" /></a>
<a class="atn-tet-right" ><img src="https://i.imgur.com/TXg70sn.png" /></a>

Chỉ vài bước đơn giản vậy thôi là các bạn có thể làm xong phần Câu đối cho Blog của mình rồi.

Hiệu ứng hoa mai vàng rơi

Ngoài ra, các hiệu ứng hoa anh đào rơi, hiệu ứng lá rơi (khi trời chuyển sang thu), hiệu ứng tuyết rơi, hiệu ứng sao rơi,…Thì cũng từ một đoạn code này ra.

<!-- Falling Hoa Mai Start -->
<canvas id="hoaMaiCanvas"></canvas>
<button id="toggleHoaMai">🌸 Tắt hoa mai</button>
<script>
(function(){
  const canvas = document.getElementById("hoaMaiCanvas"),
        ctx = canvas.getContext("2d"),
        toggleBtn = document.getElementById("toggleHoaMai");
  let W,H,running=true,flakes=[],numFlakes=20,img=new Image();
  function resize(){
    W = canvas.width = window.innerWidth;
    H = canvas.height = window.innerHeight;
  }
  window.addEventListener("resize",resize);resize();
  img.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBEjChbLNaCPV-SyCPKH_F9WAZA_CgJZTt93dYgQLoAEjlAIQ6wANnI950Y8rHirYCfcL8sXm8dfr92iWdskY1UPFIBF30x0zEhgzxj45lwibWeWLBY7AgG0WjQGQm7SgH8UBDVcUvXUQ/s1600/hoamai.png";
  class Flake {
    constructor(){ this.reset(); }
    reset(){
      this.x=Math.random()*W;
      this.y=Math.random()*-H;
      this.size=15+Math.random()*10;
      this.speed=0.5+Math.random()*1.5;
      this.swing=Math.random()*2*Math.PI;
      this.swingSpeed=0.01+Math.random()*0.02;
    }
    update(){
      this.y+=this.speed;
      this.swing+=this.swingSpeed;
      this.x+=Math.sin(this.swing)*0.5;
      if(this.y>H+this.size) this.reset();
    }
    draw(){
      ctx.drawImage(img,this.x,this.y,this.size,this.size);
    }
  }
  for(let i=0;i<numFlakes;i++) flakes.push(new Flake());
  function loop(){
    if(running){
      ctx.clearRect(0,0,W,H);
      flakes.forEach(f=>{f.update();f.draw();});
    }
    requestAnimationFrame(loop);
  }
  toggleBtn.addEventListener("click",()=>{
    running=!running;
    if(running){
      toggleBtn.textContent="🌸 Tắt hoa mai";
    }else{
      ctx.clearRect(0,0,W,H);
      toggleBtn.textContent="🌼 Bật hoa mai";
    }
  });
  img.onload=loop;
  // style
  canvas.style.position="fixed";
  canvas.style.top=0;
  canvas.style.left=0;
  canvas.style.pointerEvents="none";
  canvas.style.zIndex=9997;
  toggleBtn.style.position="fixed";
  toggleBtn.style.bottom="15px";
  toggleBtn.style.left="120px"; /* tránh nút pháo hoa + scroll top */
  toggleBtn.style.zIndex=9999;
  toggleBtn.style.padding="8px 14px";
  toggleBtn.style.fontSize="14px";
  toggleBtn.style.border="none";
  toggleBtn.style.borderRadius="6px";
  toggleBtn.style.background="#ff9800";
  toggleBtn.style.color="#fff";
  toggleBtn.style.cursor="pointer";
  toggleBtn.style.boxShadow="0 2px 6px rgba(0,0,0,0.3)";
})();
</script>
<!-- Falling Hoa Mai End -->

Popup chúc mừng năm mới

Đây có lẽ là một ý tưởng mới để tạo trang trí tết cho blogspot. Popup có nút tắt, có kết hợp trình phát nhạc. Tuy nhìn đơn giản nhưng nó là sự mới lạ.

Tổng hợp Code trang trí Tết cho blogspot
Tạo Popup chúc mừng năm mới.
<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>

Background image không khí tết đơn giản

Background image này gồm có hoa mai, hoa đào, câu đối, fillter màu đỏ. Nhìn vào là thấy tết rồi.

Code:

body {background:url(https://i.imgur.com/NZh5sJb.png) no-repeat center fixed;background-size:cover;background-color: #3333330f;}

Template đếm ngược tết

Trước đây, thứ được tìm kiếm nhiều nhất đó là template blogspot đếm ngược thời gian đến tết. Còn nay thì ko biết sao nhưng mà thôi cứ cho vô đây luôn đi.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
  <title>Countdown Tết Nguyên Đán BÍNH NGỌ 2026</title>
  <meta content='width=device-width, initial-scale=1' name='viewport'/>
  <meta content='IE=edge' http-equiv='X-UA-Compatible'/>
  <meta content='Còn bao nhiêu ngày nữa đến Tết Nguyên Đán BÍNH NGỌ 2026? Đồng hồ đếm ngược đến Tết 2026' name='description'/>
  <meta content='Countdown Tết Nguyên Đán 2026' property='og:title'/>
  <meta content='https://www.anhtrainang.com/' property='og:url'/>
  <meta content='Đếm Ngược Đến Tết' property='og:site_name'/>
  <link href='https://fonts.googleapis.com/css?family=Dancing+Script:400,700&amp;subset=vietnamese' rel='stylesheet'/>
  <!-- Blogger chỉ cho 1 skin -->
  <b:skin><![CDATA[
    html,body{
      margin:0;
      padding:0;
      height:100%;
      background:url(https://i.imgur.com/1xQVdtx.png) #900 no-repeat center center fixed;
      background-size:cover;
      font-family:'Dancing Script',Helvetica,Arial,sans-serif;
      color:#fff;
      text-align:center;
    }
    h1{font-size:3em;margin-top:0.5em;}
    h2{font-size:1.6em;margin-top:1em;}
    #main{max-width:1000px;margin:auto;padding:2em;}
    .colorlight{text-shadow:0 0 10px #efe81d,0 0 20px #f80f1f,0 0 40px #f80f1f;}
    .clock-box{display:flex;justify-content:center;flex-wrap:wrap;margin-top:2em;}
    .clock{
      background:#fff;
      color:#222;
      border-radius:20px;
      width:150px;
      height:150px;
      margin:10px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      box-shadow:0 0 15px rgba(0,0,0,0.5);
    }
    .clock .num{font-size:2.5em;font-weight:bold;}
    .clock .text{font-size:1.2em;margin-top:5px;text-transform:uppercase;}
    @media (max-width:600px){
      .clock{width:100px;height:100px;}
      .clock .num{font-size:1.8em;}
      .clock .text{font-size:1em;}
    }
  ]]></b:skin>
</head>
<body>
  <div id='main'>
    <h2 class='colorlight'>Đếm ngược đến Tết Nguyên Đán 2026</h2>
    <h1 id='tet-date'>17/02/2026</h1>
    <div class='clock-box'>
      <div class='clock'><div class='num' id='days'>0</div><div class='text'>Ngày</div></div>
      <div class='clock'><div class='num' id='hours'>0</div><div class='text'>Giờ</div></div>
      <div class='clock'><div class='num' id='mins'>0</div><div class='text'>Phút</div></div>
      <div class='clock'><div class='num' id='secs'>0</div><div class='text'>Giây</div></div>
    </div>
    <p>Chia sẻ bởi: <a href='https://www.anhtrainang.com/' style='color:#ff0;' target='_blank'>Anh Trai Nắng Blog</a></p>
  </div>
  <script type='text/javascript'>//<![CDATA[
    // Đặt ngày Tết Nguyên Đán 2026 (17/02/2026)
    const tetDate = new Date("Feb 17, 2026 00:00:00").getTime();
    function updateCountdown(){
      const now = new Date().getTime();
      const distance = tetDate - now;
      if(distance <= 0){
        document.getElementById("days").innerText = 0;
        document.getElementById("hours").innerText = 0;
        document.getElementById("mins").innerText = 0;
        document.getElementById("secs").innerText = 0;
        document.getElementById("tet-date").innerText = "Chúc Mừng Năm Mới 2026 🎉";
        return;
      }
      const days = Math.floor(distance / (1000*60*60*24));
      const hours = Math.floor((distance % (1000*60*60*24)) / (1000*60*60));
      const mins = Math.floor((distance % (1000*60*60)) / (1000*60));
      const secs = Math.floor((distance % (1000*60)) / 1000);
      document.getElementById("days").innerText = days;
      document.getElementById("hours").innerText = hours;
      document.getElementById("mins").innerText = mins;
      document.getElementById("secs").innerText = secs;
    }
    setInterval(updateCountdown, 1000);
    updateCountdown();
  //]]></script>
  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'/>
<style>
.flower {
  position: fixed;
  top: -50px;
  pointer-events: none;
  z-index: 9999;
  width: 25px;
  height: 25px;
  background-image: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMC32utXR-YIUzn6O9l89EWchYoAJfQDQqMZjz9jXgjOIsRY1hG1cUp3wYl3Yn-4PQLqz9nFPsAV6aGLDtIFPSLKGQV70Se1yGYDDfN2vBaOI5KIg8XV9eq-ANlN7FJktD_gWdQY3j3YA/s1600/hoamai.png&quot;);
  background-size: cover;
  animation: fall linear forwards;
}
@keyframes fall {
  to {
    transform: translateY(110vh) rotate(360deg);
    opacity: 0.8;
  }
}
</style>
<script type='text/javascript'>//<![CDATA[
function createFlower(){
  const flower = document.createElement("div");
  flower.classList.add("flower");
  flower.style.left = Math.random() * 100 + "vw";
  flower.style.animationDuration = (4 + Math.random() * 6) + "s"; // tốc độ rơi ngẫu nhiên
  flower.style.opacity = Math.random();
  flower.style.transform = "rotate(" + (Math.random()*360) + "deg)";
  document.body.appendChild(flower);
  setTimeout(() => { flower.remove(); }, 10000); // Xóa sau 10s để không nặng
}
// tạo hoa mai rơi liên tục
setInterval(createFlower, 500);
//]]></script>
</body>
</html>

Lời kết

Đối với Blogspot thì khá là đầy đủ để trang trí Tết rồi đó. Năm mới sắp đến, sẵn đây xin chúc tất cả mọi người một năm mới thật nhiều niềm vui, may mắn và nhiều sức khỏe nhé. Xin cảm ơn!

Đăng nhận xét