Chia sẻ code trang thống kê số liệu cho blogger đẹp mắt

Mở đầu

Bộ đếm thống kê cho blogspot thì cũng có nhiều bạn chia sẻ từ rất lâu rồi. Hôm nay Xuan Trung Pro sẽ share cho bạn code trang thống kê khá đẹp, cái này bạn tự điền thông tin nha chủ yếu là trang trí thôi nhé.

Bạn có thể xem demo dưới đây để tham khảo nha

Hướng dẫn

Bước 1: Đăng nhập vào Blogger

Bước 2: Ấn vào Trang ➤ vào tạo trang mới

Bước 3: Các bạn hãy copy đoạn code dưới đây, rồi dán toàn bộ vào phần html

<html lang="en">
  <head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/themes/odometer-theme-default.min.css" />
  </head>
  <body>
    <div class="about-container">
      <div class="profile-image">
        <img alt="Xuan Trung Pro" src="https://i.imgur.com/2fRycIO.jpg" />      </div>

      <div class="description"><center>
        <p>
          <b>Xuan Trung Pro</b>. Thủ Thuật Đa Nền Tảng.
        </p>
        </center>
      </div>

      <div class="projects-container">
        <div class="project">
          <h3 class="project-name">Total Posts</h3>
          <div class="project-number odometer websites-designed">0</div>
        </div>
        
        <div class="project">
          <h3 class="project-name">Apps Developed</h3>
          <div class="project-number odometer apps-developed">0</div>
        </div>
      </div>
      </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/odometer.min.js"></script>

    <script>
      const websitesDesigned = document.querySelector(".websites-designed");
      const appsdeveloped = document.querySelector(".apps-developed");

      setTimeout(() => {
        websitesDesigned.innerHTML = "32";
        appsdeveloped.innerHTML = "48";
      }, 400);
    </script>
  </body>
</html>


<style> 
.about-container {
  max-width: 900px;
  margin: 0 auto;
  font-family: "Roboto", sans-serif;
}

.about-container p {
  line-height: 2;
  padding: 0 20px;
}

.about-container .profile-image {
  text-align: center;
  padding: 30px;
}

.about-container .profile-image img {
  width: 200px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  padding: 8px;
}

.projects-container {
  display: flex;
  justify-content: center;
  padding: 8px;
  box-shadow: 0 4px 16px -6px rgba(0, 0, 0, 0.4);
  max-width: 550px;
  margin: 24px auto;
  border-radius: 20px;
}

.projects-container .project {
  height: 160px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 32px;
}

.projects-container .project-name {
  font-size: 16px;
}

.projects-container .project-number {
  font-size: 72px;
  font-weight: bold;
}

.our-team-heading {
  text-align: center;
  text-transform: uppercase;
  font-size: 48px;
  padding-top: 64px;
}

.our-team {
  display: flex;
  padding: 30px;
}

.our-team img {
  width: 100%;
}

.our-team .team-member {
  margin: 0 4px;
  position: relative;
}

.our-team .designation {
  position: absolute;
  bottom: 30px;
  background: #fff;
  padding: 12px 20px;
  border-radius: 0 20px 20px 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  font-size: 14px;
}

.about-container .our-mission {
  padding: 20px;
  position: relative;
  display: flex;
  align-items: center;
}

.about-container .our-mission .quote-icon {
  position: absolute;
  opacity: 0.2;
  height: 80px;
}

.about-container .our-mission p {
  margin-left: 100px;
  font-size: 20px;
  font-style: italic;
}

@media (max-width: 700px) {
  .our-team {
    flex-direction: column;
    align-items: center;
  }

  .our-team img {
    height: 250px;
    width: 300px;
    object-fit: cover;
  }
}

</style>

Các bạn thay lại link ảnh, tên blog với số liệu lại nha, phần mà mình đã đánh dấu màu cam đó.

Lời kết

Okay, hi vọng là bài viết này sẽ hữu ích với bạn, chúc các bạn thành công và đừng quên chia sẻ bài viết này đến nơi rộng rãi nha.

Related Posts
Rate this post

XTT

Subscribe to my Youtube channel