Hướng dẫn thêm tiện ích đếm ngược ngày đến tết cho Blogspot

Bài viết này mình sẽ hướng dẫn bạn thêm tiện ích đếm ngược ngày đến tết cho Blogspot mà không cần phải tạo một Blog mới và làm Template riếng. Thủ thuật này chèn trực tiếp và trong Theme của bạn luôn. Mời các bạn cùng tham khảo nhé!
Đọc thêm: Hiệu ứng tuyết rơi nhẹ nhàng trang trí Noel, mùa Đông cho Blogspot

Cách thêm tiện ích đếm ngược ngày đến tết cho Blogspot

Hình ảnh minh họa cho Tiện ích

Cách thực hiện

Bước 1. Mình cần chắc rằng Theme bạn có thư viện jquery. Nếu chưa chưa có bạn chèn đoạn mã này giữa cặp thẻ <head>...</head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Bước 2. Các bạn chèn đoạn script này trước thẻ đóng </body>

<script type='text/javascript'>
//<![CDATA[
// Countdown holiday
     let timeout = null;
   function makeTimer() {
        // Edit Here
        //---- let endTime = new Date("'02/03/2019 23:59:59 GMT+0700 (SE Asia Standard Time)"); ----
        let endTime = new Date("'02/05/2019 23:59:59 GMT+0700 (SE Asia Standard Time)");
        endTime = (Date.parse(endTime) / 1000);
        let now = new Date();
        now = (Date.parse(now) / 1000);
        let timeLeft = endTime - now,
          days = Math.floor(timeLeft / 86400),
          hours = Math.floor((timeLeft - (days * 86400)) / 3600),
          minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60),
          seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
        if (hours === 0 && minutes === 0 && seconds === 0) {
          clearTimeout(timeout);
        } else {
          if (hours < "10") {
            hours = "0" + hours;
    }
          if (minutes < "10") {
            minutes = "0" + minutes;
          }
          if (seconds < "10") {
            seconds = "0" + seconds;
          }
          $("#days").html(days + "<span>Ngày</span>");
          $("#hours").html(hours + "<span>Giờ</span>");
          $("#minutes").html(minutes + "<span>Phút</span>");
          $("#seconds").html(seconds + "<span>Giây</span>");
          timeout = setTimeout(makeTimer, 1000);
        }
      }
      makeTimer();
//]]>
  </script>

Vì làm tiện ích đếm ngược ngày đến tết lên đoạn JS trên đã đặt sẵn ngày rồi và mình không hướng dẫn sửa ngày phần này. Bạn nào biết có thể tự sửa ngày thành tiện ích đếm ngược tùy thích.

Bước 3. Các bạn thêm đoạn HTML dưới đây vào nơi bạn muốn hiển thị.

<div id='countdown'>
<div id='timer'>
<div id='days'></div>
<div id='hours'></div>
<div id='minutes'></div>
<div id='seconds'></div>
</div>
</div>

Bước 4. Các bạn viết CSS cho nó. Tùy theo sở thích của bạn và viết CSS cho nó nhé. CSS sẽ có dạng sau:

#countdown{}
#timer{}
#timer div{}
#timer span{}
#days,#hours,#minutes{}

Các bạn cũng có thể tham khảo đoạn CSS dưới đây của bên toishare.net

#countdown{float:left;width:100%;height:130px;box-sizing:border-box;margin-top:30px}
#timer{padding-top:0}
#timer div{width:65px;height:65px;line-height:45px;z-index:199;background:transparent;box-shadow:0 0 0 4px rgb(78, 50, 136);border-radius:50%;text-align:center;font-size:20px;font-weight:700;color:#fff;display:inline-block;float:left;margin:0 9px;color:rgb(78, 50, 136)}
#timer div:nth-child(1),{margin-left:0}
#timer div:last-child{margin-right:0}
#timer span{color:rgb(78, 50, 136);margin-bottom:20px;font-size:12px;display:block;transform:translate(0,-52%)}
#days,#hours,#minutes{color:#fb5182}
@media screen and (max-width: 440px) {
#timer div{width:50px!important;height:50px!important;line-height:35px!important;font-size:15px!important}
#timer span{font-size:8px;transform:translate(0,-52%)!important}
.title-countdown span{font-size:18px!important}
}

CSS sẽ chèn ở trước thẻ </b:skin> hoặc trong cặp thẻ <style>...</style>

Lời kết

Chỉ với một vài bước đơn giản thì bạn đã có một tiện ích đẹp làm tăng thêm không khí tết sắp đến trên Blog bạn rồi. Chúc các bạn thành công!
Source: toishare.net

Hướng dẫn thêm tiện ích đếm ngược ngày đến tết cho Blogspot

Cách thực hiện

Lời kết

Bài xem nhiều

Các bài đăng gần đây

Hướng dẫn thêm tiện ích đếm ngược ngày đến tết cho Blogspot

Cách thực hiện

Lời kết

Bài viết liên quan

Bài xem nhiều

Các bài đăng gần đây