Hộp thống kê trượt dọc cho blogspot

Trong quá trình làm blog, chắc hẳn bạn đã từng muốn hiển thị một hộp nhỏ thống kê ngay bên cạnh trang — kiểu như một thanh mini widget trượt bên trái hiển thị tổng số bình luận, bài viết, trang, và thời gian tải trang đúng không?

Bài viết hôm nay, mình (Anh Trai Nắng Blogger 🌞) sẽ chia sẻ cho các bạn code hoàn chỉnh để thêm hộp thống kê cực đẹp này vào Blogspot.

Tạo hộp thống kê trượt dọc cho blogspot.

Giới thiệu

Code được viết hoàn toàn bằng HTML, CSS và JavaScript — không cần jQuery, load nhanh, tương thích với mọi template.

Demo các bạn xem bên cạnh bài viết này luôn nhé!

Tính năng nổi bật

• Hiển thị tổng số bình luận, bài viết, trang tự động từ Blogger Feed.
• Có hiệu ứng trượt mở rộng khi hover, mượt mà và tinh tế.
• Hiển thị thời gian tải trang thực tế.
• Giao diện phẳng, gọn gàng, đẹp mắt, nằm bên trái màn hình.
• Dễ chỉnh màu, font hoặc kích thước theo theme của bạn.

Cách chèn code vào Blogspot

Bước 1: Truy cập Blogger → Giao diện → Chỉnh sửa HTML

Bước 2: Tích hợp Fontawesome 4.7 nếu blog bạn chưa có, chèn đoạn mã sau trước thẻ đóng </body>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Bước 3: Đặt tất cả code sau trước thẻ đóng </body> hoặc trong widget HTML/Javascript đều được:

<style>
:root{
  --stat-collapsed: 44px;   /* rộng khi thu gọn */
  --stat-expanded: 250px;   /* rộng khi hover */
  --stat-height: 40px;      /* cao mỗi dòng */
  --stat-radius: 9999px;
  --stat-border: #e5e7eb;
  --shadow: 0 6px 20px rgba(0,0,0,.12);
  --fg: #111827;
  --bg: #ffffff;
  --cmt: #2563eb; /* xanh comment */
  --post:#d97706; /* cam post */
  --page:#16a34a; /* xanh lá page */
  --load:#6d28d9; /* tím load */
}

/* ===== Container cố định, canh phải ===== */
.statistics{
  position: fixed;
  left: 15%;
  top: 32%;
  background: var(--bg);
  border-radius: 12px;
  z-index: 200;
  padding: 10px 8px;
  box-shadow: var(--shadow);
  width: 60px;
  box-sizing: border-box;
}
.statistics ul{
  padding: 0; margin: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
}

/* ===== Item chuẩn hoá kích thước để NHÌN ĐỀU ===== */
.icon-statistics{
  width: var(--stat-collapsed);
  height: var(--stat-height);
  border: 1px solid var(--stat-border);
  border-radius: var(--stat-radius);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  box-sizing: border-box;
  color: var(--fg);
  overflow: hidden;
  cursor: default;
  transition: width .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
}
.icon-statistics i{
  width: 20px; text-align: center; font-size: 16px; flex: 0 0 20px;
}

/* Hover: mở rộng ĐỀU tới cùng 1 độ rộng */
.icon-statistics:hover{ width: var(--stat-expanded); }

/* Nhãn/tooltip nội bộ, không nhảy chữ */
.icon-statistics .label{
  opacity: 0; white-space: nowrap; pointer-events: none;
  transition: opacity .18s ease;
  font-size: 14px; line-height: 1;
}
.icon-statistics:hover .label{ opacity: 1; }

/* Màu sắc từng loại khi hover (đồng bộ border/bg/fg) */
.icon-statistics.cmt-statistics:hover{ background: var(--cmt); color: #fff; border-color: var(--cmt); }
.icon-statistics.post-statistics:hover{ background: var(--post); color: #fff; border-color: var(--post); }
.icon-statistics.page-statistics:hover{ background: var(--page); color: #fff; border-color: var(--page); }
.icon-statistics.load-statistics:hover{ background: var(--load); color: #fff; border-color: var(--load); }

/* Số liệu căn đều, không lệch icon */
.metric{
  margin-left: auto; /* đẩy số về cuối để hàng thẳng cột */
  font-size: 13px;
  opacity: .9;
}

/* Tôn trọng người dùng hạn chế chuyển động */
@media (prefers-reduced-motion: reduce){
  .icon-statistics, .icon-statistics .label{ transition: none; }
}

/* Mobile: hạ kích thước một chút cho đều */
@media (max-width: 480px){
  :root{
    --stat-collapsed: 40px;
    --stat-expanded: 160px;
    --stat-height: 36px;
  }
}
</style>
<div class="statistics" role="region" aria-label="Thống kê blog">
  <ul>
    <li>
      <span class="icon-statistics cmt-statistics" title="Tổng bình luận">
        <i class="fa fa-comments-o" aria-hidden="true"></i>
        <span class="label">Tổng bình luận</span>
        <span id="totalComment" class="metric" aria-live="polite"></span>
      </span>
    </li>
    <li>
      <span class="icon-statistics post-statistics" title="Tổng bài viết">
        <i class="fa fa-edit" aria-hidden="true"></i>
        <span class="label">Tổng bài viết</span>
        <span id="totalPost" class="metric" aria-live="polite"></span>
      </span>
    </li>
    <li>
      <span class="icon-statistics page-statistics" title="Tổng trang">
        <i class="fa fa-file-powerpoint-o" aria-hidden="true"></i>
        <span class="label">Tổng trang</span>
        <span id="totalPage" class="metric" aria-live="polite"></span>
      </span>
    </li>
    <li>
      <span class="icon-statistics load-statistics" title="Thời gian tải trang">
        <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
        <span class="label">Thời gian tải trang</span>
        <span id="loadTime" class="metric" aria-live="polite"></span>
      </span>
    </li>
  </ul>
</div>
<script>//<![CDATA[
/* ===== Lấy dữ liệu ===== */
function numberOfComments(json) {
  var total = json.feed?.openSearch$totalResults?.$t || 0;
  document.getElementById("totalComment").textContent = total + ' comments';
}
function showpostcount(json) {
  var total = parseInt(json.feed?.openSearch$totalResults?.$t || '0', 10);
  document.getElementById("totalPost").textContent = total + ' posts';
}
function numberOfPages(json) {
  var total = json.feed?.openSearch$totalResults?.$t || 0;
  document.getElementById("totalPage").textContent = total + ' pages';
}

/* ===== Bộ đếm load time (dừng khi trang load xong) ===== */
var startTime = new Date();
var loopTime = setInterval(currentTime, 100);
function currentTime() {
  var a = Math.floor((new Date() - startTime) / 100) / 10;
  if (a % 1 === 0) a += ".0";
  document.getElementById("loadTime").textContent = a + ' seconds';
}
window.addEventListener('load', function(){ clearInterval(loopTime); });
//]]></script>
<!-- Feeds Blogger (JSONP) -->
<script src="/feeds/comments/default?alt=json-in-script&callback=numberOfComments" defer='defer'></script>
<script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount" defer='defer'></script>
<script src="/feeds/pages/default?alt=json-in-script&callback=numberOfPages" defer='defer'></script>

Bước 4: Lưu lại và kiểm tra kết quả ở trang chủ nhé.

Tùy chỉnh thêm

Muốn đổi vị trí sang bên phải 👉 đổi left: 15% thành right: 15%.

Muốn đổi màu chủ đạo:

• Comment: --cmt: #2563eb;
• Post: --post: #d97706;
• Page: --page: #16a34a;
• Load: --load: #6d28d9;

Thay font-size hoặc bo tròn bằng cách chỉnh trong :root.

Kết luận

Với vài dòng code đơn giản, bạn đã có ngay hộp thống kê trượt bên trái đẹp mắt cho Blogspot mà không cần plugin hay widget phức tạp.

Nếu bạn thích mẫu này, hãy để lại bình luận hoặc chia sẻ bài viết để mình có thêm động lực chia sẻ nhiều tiện ích Blogger hay hơn nhé 💖

DEMO TIPS

Theo AnhTraiNang.Com