Hướng dẫn cách tạo đồng hồ đếm ngược cho WordPress

Hướng dẫn cách tạo đồng hồ đếm ngược cho WordPress: Sắp đến tết rồi cửa hàng hoặc công ty bạn đang có đợt giảm giá các mặt hàng trên website sử dụng mã nguồn mở WordPress. Và bạn muốn có một cái đồng hồ thông báo ngày hết hạn cửa dịp giảm giá.

Trong bài viết này Blog thủ thuật máy tính f4vnn sẽ giúp bạn và hướng dẫn cách tạo đồng hồ đếm ngược cho WordPress của bạn.

Hướng dẫn cách tạo đồng hồ đếm ngược cho WordPress

Trong hướng dẫn này sẽ chia sẻ cho bạn Html và Css cho đồng hồ đếm ngược này để các bạn tham khảo.

1. Html đồng hồ đếm ngược

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="countdown-container">
      <h2 class="countdown-heading">Huge Discount!</h2>
      <p class="countdown-details">Sale ends in</p>

      <div class="timer">
        <div class="days">
          <div class="number">
            02
          </div>
          <div class="unit">
            Days
          </div>
        </div>

        <div class="hours">
          <div class="number">
            12
          </div>
          <div class="unit">
            Hours
          </div>
        </div>

        <div class="minutes">
          <div class="number">
            24
          </div>
          <div class="unit">
            Minutes
          </div>
        </div>

        <div class="seconds">
          <div class="number">
            55
          </div>
          <div class="unit">
            Seconds
          </div>
        </div>
      </div>

      <a href="#" class="countdown-btn">Purchase</a>
    </div>
  </body>
</html>

Các bạn nhớ chỉnh sửa thời gian cho phù hợp với bạn nhé.

2. Css đồng hồ đếm ngược

.countdown-container {
  background: #b6e8ff;
  padding: 24px;
  color: #1d3357;
  font-family: "Roboto", sans-serif;
  width: 500px;
  box-sizing: border-box;
  margin: 0 auto;
  box-shadow: 0 4px 22px -8px rgba(0, 0, 0, 0.6);
}

.countdown-container .countdown-heading {
  text-align: center;
  font-size: 32px;
  margin: 8px 0;
}

.countdown-container .countdown-details {
  text-align: center;
}

.timer {
  background: #1d3357;
  color: #f1faee;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  text-align: right;
  border-radius: 10px;
}

.timer .number {
  font-size: 56px;
  font-weight: bold;
}

.timer .unit {
  color: #a8dadc;
}

.countdown-btn {
  background: #dc2e2e;
  text-decoration: none;
  padding: 16px 32px;
  display: block;
  margin: 32px -24px -24px -24px;
  color: #f1faee;
  font-weight: bold;
  text-align: center;
  transition: background-color 500ms;
}

.countdown-btn:hover {
  background: #e03f3f;
}

Bạn có thể dùng thử tiện ích Web Maker để thử nghiệm code trước, để xem nó có phù hợp với bạn không nhé.

Hy vọng với hướng dẫn cách tạo đồng hồ đếm ngược cho WordPress mà Blog thủ thuật máy tính f4vnn đã chia sẻ sẽ có ích với bạn. Chúc bạn thành công.