Share Blogger Template Countdown Happy New Year [Update 2025]

14 tháng 12

Template

Mục lục

Không khí Tết đang đến gần, chắc hẳn anh em Blogger đều muốn blog của mình thêm phần sinh động, mang đậm hương vị ngày xuân. Vì vậy hôm nay mình xin chia sẻ template Countdown Tết 2026 dành cho Blogspot.

Share Blogger Template Countdown Happy New Year.

Điểm nổi bật của template:

⏳ Đếm ngược thời gian đến giao thừa 2026.
🌸 Hiệu ứng hoa mai vàng rơi mềm mại, tự nhiên, không lag.
🎆 Pháo bông lung linh phía sau, tạo không khí rộn ràng.
⚡ Giao diện nhẹ, tối ưu SEO, dễ chỉnh sửa theo nhu cầu.
📱 Responsive, hiển thị tốt trên cả PC và mobile.

🚀 Xem Demo

Tải Template

<?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>

Anh em có thể trực tiếp click vào nút download trên khung code để tải trực tiếp file về hoặc là copy code ở đây đều được!

Cách cài đặt Template

Vào Blogger → Chủ đề → Chỉnh sửa HTML.
Xóa code cũ, dán code template mới vào.
Lưu lại và xem kết quả ngay trên blog.

👉 Lưu ý: Trong phần <head>, nếu có link Google Fonts nhớ đổi &subset= thành &subset= để tránh lỗi XML.

Kết luận

Với template này, blog của bạn sẽ tràn đầy không khí Tết, mang lại trải nghiệm thú vị cho độc giả. Anh em Blogger có thể sử dụng làm trang chờ Tết, đếm ngược sự kiện, hoặc landing page mini.

💬 Nếu thấy hay nhớ để lại bình luận, chia sẻ cho bạn bè nhé!

Tăng tương tác MXH

Like, sub, view, comment, share livestream…

Instagram, TikTok, YouTube, Twitter, Shopee
Dịch vụ nhanh – ổn định

🎁 Mã giảm giá: đang cập nhật

Khám phá

Tài khoản Premium

CapCut, Canva, ChatGPT, Semrush, HMA, Google Ads…

Kích hoạt nhanh – bảo hành rõ
Đa dạng gói

🎁 Mã giảm giá: đang cập nhật

Mua ngay

Template Blogspot

Thiết kế chuẩn SEO, tối ưu tốc độ & giao diện.

Nhiều mẫu cho blog, shop
Tùy biến dễ

🎁 Mã giảm giá: anhtrainang (-10%)

Xem mẫu

Tags: Blogger Download Share Template

Chia sẻ:

Đã sao chép link!

Nhận xét (21)

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

Chữ in đậm
Chữ in nghiêng
Chữ gạch chân
<strike>~~Chữ gạch ngang~~</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

👉 Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
👉 Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
👉 Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu ✅

Hiển thị